setTimeout in $.each

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，但然后动画是不是我喜欢它是。因为它是"一次全部"而不是"1乘1"。

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

Answer 1

正如对你的解决方案的评论，这里有两种方法可以稍微改进一下。

使用">

; 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++
});
});

注意，代码没有经过测试。

Answer 2

我已经找到了，解决方案:

$('.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);
}

作为参数传递，谢谢清理!