函数超时

Function timeout

本文关键字：超时 函数      更新时间：2023-09-26

我正在尝试编写一个代码，在有限的时间内将类添加到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在传递给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：

  • 神话般的方法
  • 你必须记住this

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

相关文章：