函数超时答案

【问题标题】：Function timeout函数超时
【发布时间】：2012-06-18 08:04:43
【问题描述】：

我正在尝试编写一段代码，在有限的时间内将类添加到 div，然后将其删除。
我尝试使用 javascript 的 setTimeout 和 jQuery 的延迟，但没有任何效果。
该元素已设置但从未移除。

这是我想出的：

window.onload = function() {
    $(".button").click(handler);
}

function handler() {
    $(this).addClass("onclick");
    setTimeout(function() { $(this).removeClass("onclick"); }, 3000); // JS's setTimeout

    $(this).addClass("onclick").delay(3000).removeClass("onclick"); // jQuery's delay
}

我不明白出了什么问题...我什至尝试为 setTimeout 函数编写第二个处理程序。

提前致谢。

【问题讨论】：

一个函数的this是另一个函数的global object

标签： javascript jquery css class function

【解决方案1】：

您遇到的问题是this 在您传递给setTimeout 的函数中与在它之外的不同。通常的解决方法是通过创建一个变量来保存它，并使用该变量来使用闭包：

function handler() {
    var $elm = $(this);

    $elm.addClass("onclick");
    setTimeout(function() {
        $elm.removeClass("onclick");
    }, 3000);
}

我还使用 var 来缓存 $(this) 的结果，因为多次这样做是没有意义的。

更多背景：

在 JavaScript 中，与某些看起来相似的语言不同，this 完全由函数的调用方式定义。当您使用setTimeout 时，调用函数的方式将使this 成为全局对象（window，在浏览器上），这就是$(this).removeClass(...) 不起作用的原因。

更多关于this如果你有兴趣：

【讨论】：

【解决方案2】：

setTimeout 调用中的this 不引用被点击的元素。

改成这样：

function handler() {
    var t = $(this);
    t.addClass("onclick");
    setTimeout(function() { t.removeClass("onclick"); }, 3000);
}

工作示例 - http://jsfiddle.net/5vakN/

this 在 javascript 中如何工作的参考 - http://bonsaiden.github.com/JavaScript-Garden/#function.this

【讨论】：