javascript - setTimeout 不会执行函数

Question

我什至看了这个，这个解决方案仍然没有帮助我：在 jquery 中 X 秒后执行一个函数

这是我的代码：

// featured bounce
$('#featured .animated').hover(function() {
    $(this).addClass('bounce');
    setTimeout( function(){
        $(this).removeClass('bounce');},
        1300
    );
});

类的添加有效，但 setTimeout 考验将不起作用。它甚至不会执行，也不会在 Chrome 控制台中引发 javascript 错误。我觉得我的所有内容都输入正确了。在 addClass() 之后的 .animated 对象上的类如下所示：

“动画弹跳”

动画播放，但它永远不会从类属性中删除“反弹”。

有什么帮助吗？

Answer 1

正确使用Function.prototype.bind，您可以避免廉价的上下文攻击，例如var that = this.

// featured bounce
$('#featured .animated').hover(function() {
    var elem = $(this);
    elem.addClass('bounce');
    setTimeout(elem.removeClass.bind(elem, 'bounce'), 1300);
});

旁注：Function.prototype.bind 是 ES5 的补充，需要考虑浏览器支持。有关该功能，请参阅 MDN 文章底部的兼容性表。

Answer 2

this 的范围是指向窗口，而不是您期望的元素。

$('#featured .animated').hover(function() {
    var elem = $(this);
    elem.addClass('bounce');
    setTimeout( function(){
        elem.removeClass('bounce');},
        1300
    );
}); 

Answer 3

$('#featured .animated').hover(function() {
    $(this).addClass('bounce');
    (function(that) {
        setTimeout( function(){
            // use `that` instead of `this`
            $(that).removeClass('bounce');
        }, 1300);
     })(this); //pass `this` into this function
});