Question

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

这是我想出来的：

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函数编写第二个处理程序。

先谢谢。

Answer 1

您遇到的问题是this在您传递给setTimeout的函数中与在function handler() { var $elm = $(this); $elm.addClass("onclick"); setTimeout(function() { $elm.removeClass("onclick"); }, 3000); }之外的函数不同。通常的解决方法是通过创建一个变量来保存它，然后使用变量来使用闭包：

$(this)

在那里我也使用var来缓存this的结果，因为多次这样做没有意义。

更多背景资料：

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

如果您有兴趣，请点击{{1}}：

Answer 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

功能超时

2 个答案: