Mubin Mubin - 2 months ago 10
Javascript Question

Uncaught TypeError: Cannot read property 'stop' of undefined

I'm working with

JS
[
ES6
], I'm able to display notification on the go, on clicking thi
x
icon, it's disappearing just fine, but if I let it to
timeout
it throws
Type Error


Notify.js?49da:72 Uncaught TypeError: Cannot read property 'stop' of undefined


Here is my
class
snippet

class Notify {
constructor() {
this.html = '';
}

showNotification(text = 'Something went wrong!', style = 'warning'){
//here I need to update this.html
this.html = $(`<div class="alert alert-${style} hide">${this.icon} ${text} </div>`);

//close on click
let vue = this;
$('<a>', {
text: '×',
class: 'button close',
style: 'padding-left: 10px;',
href: '#',
click: function (e) {
e.preventDefault();
vue.removeNotice();
}
}).prependTo(vue.html);
vue.container.prepend(vue.html);
vue.html.removeClass('hide').hide().fadeIn('slow');
var timer = setInterval(vue.removeNotice, vue.time);

$(vue.html).hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(vue.removeNotice, vue.time);
});

vue.html.on('click', function () {
clearInterval(timer);
vue.removeNotice()
});

}

removeNotice() {
console.dir(this.html); //this just prints empty string
this.html.stop().fadeOut('slow').remove() //this line throws error.
}


any clue where and what I'm doing wrong?
P.S I'm learning this stuff. and downvoter(s) please point to right direction

Answer

You're not binding this properly.

  timer = setInterval(vue.removeNotice.bind(this), vue.time);

Should do the trick.

Comments