$.each 中的 setTimeout

Question

我正在尝试“1 对 1”地制作角色动画，但我似乎无法弄清楚为什么此代码无法正常工作：

$('.overlay-listing').hover(function(){
    var idx = 1;
    $('.strip-hov span', this).each(function(){
        if (!$(this).hasClass('splitrow')){
            setTimeout(function(){
               $(this).toggleClass('animate');
            }, idx * 15);
        }
        idx++
    });
});

我真的无法找出问题所在。我还尝试更改“idx * 15”=>“idx”，如：

$('.overlay-listing').hover(function(){
    var idx = 1;
    $('.strip-hov span', this).each(function(){
        if (!$(this).hasClass('splitrow')){
            setTimeout(function(){
               $(this).toggleClass('animate');
            }, idx);
        }
        idx++
    });
});

代码在没有 setTimeout 的情况下工作正常，但是动画不是我喜欢的样子。因为它是 'all at once' 而不是 '1-by-1'。

我也试过：$(this).delay(xxxx).toggleClass('animate');没有效果。

Answer 1

找到了，解决办法：

$('.overlay-listing').hover(function(){
            var idx = 1;
            $('.strip-hov span', this).each(function(idx){
                if (!$(this).hasClass('splitrow')){
                    var ethis = $(this);
                    setTimeout(function(){
                       ethis.toggleClass('animate');
                    }, idx * 15);
                }
                idx++
            });
        });

setTimeout 中的 'this' 不是我认为的 'this'。调用了一个新函数，因此 'this' 更改了它的值。

谢谢你的时间！

在 Marc 的评论后编辑：

if (!$(this).hasClass('splitrow')){
   setTimeout(function(r){
       $(r).toggleClass('animate');
   }, idx * 15, this);
}

已将其作为参数传递，感谢清理！

Answer 2

正如对您的解决方案的评论，这里有 2 种方法可以稍微改进它。

使用“这个”范围：

$('.overlay-listing').hover(function () {
    var idx = 1;
    $('.strip-hov span', this).each(function (idx) {

        if (!$(this).hasClass('splitrow')) {
            setTimeout(function (scope) {
                $(scope).toggleClass('animate');
            }, idx * 15, this);
        }

        idx++

    });
});

使用“箭头函数”

$('.overlay-listing').hover(function () {
    var idx = 1;
    $('.strip-hov span', this).each(function (idx) {

        if (!$(this).hasClass('splitrow')) {
            setTimeout(() => {
                $(this).toggleClass('animate');
            }, idx * 15);
        }

        idx++

    });
});

注意，代码未经测试。

$.each 中的 setTimeout

setTimeout in $.each

javascript

jquery

settimeout

each