$.each 中的 setTimeout答案

【问题标题】：setTimeout in $.each$.each 中的 setTimeout
【发布时间】：2021-06-08 14:37:54
【问题描述】：

我正在尝试为字符“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 的情况下可以正常工作，但是动画不是我喜欢的那样。因为它是“一次性”而不是“1×1”。

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

【问题讨论】：

请定义“无法正常工作”。
它什么也没做。没有错误只是虚无。但我似乎已经想通了，无论如何感谢您的时间。

标签： javascript jquery settimeout each

【解决方案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);
}

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

【讨论】：

您可以在这种情况下使用“箭头函数”来避免使用var ethis=...，或者将this 作为setTimeout... 的第三个参数传递
感谢您帮助我改进！我似乎无法让它作为第三个参数传递。但我的解决方案是不好的做法吗？
每个 sè 的做法都不错，但“不干净”。如上所述，有可能将其写得“更好”/更清洁。
我同意，我已经改变了我的答案。谢谢！

【解决方案2】：

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

使用“this”范围：

$('.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++

    });
});

注意，代码未经测试。

【讨论】：