Question

我想让一个元素淡入，并在页面淡出前停留在页面上7秒钟。我可以随时取消它。我定义了以下功能。但是当我打电话给info_timeout.setup(ele, 'some msg here')时，这个元素刚刚消失并立即淡出。

我错过了什么吗？

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首先评估到函数对象，如果之后有(...)，它将调用所述函数-object。）

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

但是，仍然不正确，因为超时函数（this）内的hide_info会出错！但是这可以通过使用闭包来解决。（关于这个主题有很多很棒的答案，请随时搜索！）

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传递给clearTimeout是可以的：它会默默地忽略你。

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

快乐的编码。

setTimeout - 立即执行回调？

1 个答案: