setTimeout——立即执行回调

Question

我想让元素淡入，并在页面上停留7秒，然后淡出。我可以随时取消它。我定义了以下函数。但是当我调用info_timeout.setup(ele, 'some msg here')时，ele就会立刻淡出。

我错过了什么吗?

var info_timeout = {
show_info: function(){
    this.ele.html(this.msg).fadeIn('normal');
    this.id = setTimeout(this.hide_info(), 7000);
},
hide_info: function(){
    console.log(this.ele, this.id);
    this.ele.fadeOut('slow');
    delete this.id;
},
setup: function(ele, msg) {
    this.ele = ele;
    this.msg = msg;
    this.cancel();
    this.show_info();
},
cancel: function() {
    if(typeof this.timeoutID == "number") {
        clearTimeout(this.id);
        delete this.id;
    }
}

};

谢谢。

Answer 1

几个问题

立即调用hide_info 。括号调用一个函数对象!(或用于对表达式应用优先级)。

,

this.id = setTimeout(this.hide_info(), 7000);

是否[主要]等同于:

var temp = this.hide_info()       // call function ... uh, what?
this.id = setTimeout(temp, 7000)  // temp is "return" value ("undefined" here)

哦!这是不对的:)所以去掉括号。这将把函数对象本身传递给setTimeout。(是的，函数在JavaScript中只是对象。表达式this.hide_info首先求值为函数对象，如果后面有(...)，它将调用该函数对象。

this.id = setTimeout(this.hide_info, 7000)

然而，它是仍然不正确，因为超时函数(hide_info)中的this将是错误的!但这可以通过使用闭包来解决。(关于这个话题有很多很棒的答案，请随意搜索!)

var self = this
this.id = setTimeout(function () {
    // now in hide_info "this" will be "self", which was "this" ... outside :)
    self.hide_info()
}, 7000) 

(或使用ECMAScript ed5或库中的Function.bind)

另外，this.id与this.timeoutID不一样，并且怀疑其"正确性"。

保持简单。可以将undefined/0传递给clearartimeout:它会静默地忽略你。

cancel : function () {
    clearTimeout(this.id)  // but id is a horrid overloaded name :)
    this.id = undefined
}

快乐编码。