Question

So, i see no reason why this isn’t working but i am at a wall and frustrated. Why can’t i call this.myself from within the wyr.message.close function? Maybe my understanding of this is scewed but i was sure this is referring to the object itself, not the function.

this.myself is undefined

Code:

wyr.message = {
    myself: $('.message'),
    init: function() {
        if(this.myself.is(':visible')){
            setTimeout(this.close, 5000);
        }
    },
    close: function(){
        this.myself.fadeOut(1200,function(){
            this.myself.remove();
        });
    }
}

Answer 1

wyr.message = {
    myself: $('.message'),
    init: function() {
        var self = this;
        if(this.myself.is(':visible')){
            setTimeout(function(){
                self.close();
            }, 5000);
        }
    },
    close: function(){
        this.myself.fadeOut(1200,function(){
            $(this).remove();
        });
    }
}

The issue is context. Within the callback function passed to fadeOut, this is bound to the element being worked on by jQuery, not to the wyr.message object.

EDIT:

There’s also an issue with the init method. SetTimeout will bind the value of this to the global (window) object – so we save a reference to the this we want and use that to invoke the close method.

You could also look into Function.prototype.bind, but it’s not supported in older browsers.