Question

在你跳到重复的问题之前，我必须说我在来到这里之前已经浏览过stackoverflow和其他地方。

所以基本上，我正在使用精灵图像并需要遍历其中的图像。在下面的代码块中，您将找到我现在接近它的方式。但是，添加setTimeout函数后，似乎函数参数中的所有内容都不再执行。

var headerTimeout = 1000/24;

jQuery('.headerGif').hover(function(){
    for(var i = 1; i <= 41; i++){
        setTimeout(function(){
            if (jQuery(this).hasClass('.header-HeaderBedrijfsVideo00' + (i - 1))) {
                jQuery(this).removeClass('.header-HeaderBedrijfsVideo00' + (i - 1));
            }

            jQuery(this).addClass('.header-HeaderBedrijfsVideo00' + i);
        }, headerTimeout);
    }
});

如果有更好的方法来解决这个问题，如果有人能指出我正确的方向，我将不胜感激。我已经在考虑为此目的使用插件。

编辑：我已经尝试检查重复标记中的问题，但这基本上是关闭所做的不是吗？我刚刚从其中一个答案中添加了闭包，但它仍然不起作用。

Answer 1

使用闭包，for循环将在超时功能之前执行，然后你可以获得最后一次递增i值41，所以在这种情况下你必须像多线程一样使用闭包

    jQuery('.headerGif').hover(function () {
   var _this=this;
        for (var i = 1; i <= 41; i++) {
            (function (i) {
                setTimeout(function () {
                    if (jQuery(_this).hasClass('.header-HeaderBedrijfsVideo00' + (i - 1))) {
                        jQuery(_this).removeClass('.header-HeaderBedrijfsVideo00' + (i - 1));
                    }

                    jQuery(_this).addClass('.header-HeaderBedrijfsVideo00' + i);
                }, i*100);
            })(i);
        }
    });

Answer 2

<强>原因

setTimeout函数将在i变为41之后被调用（无论.循环的结束）!!

查看以下小提琴（查看控制台）

http://jsfiddle.net/szx19hzo/2/

请勿在hasClass函数

var headerTimeout = 1000/24; jQuery('.headerGif').hover(function(){ for(var i = 1; i <= 41; i++){ var className='header-HeaderBedrijfsVideo00' + (i - 1); removeClass(this,className,i); } }); function removeClass(item,className,i){ setTimeout(function(){ console.log(className); if (jQuery(item).hasClass(className)) { jQuery(item).removeClass('header-HeaderBedrijfsVideo00' + (i - 1)); console.log("removed"); } jQuery(item).addClass('.header-HeaderBedrijfsVideo00' + i); }, headerTimeout); };

您可以删除超时以使其正常工作，请检查以下链接（检查控制台并检查元素以注意该类已被删除）

http://jsfiddle.net/szx19hzo/3/

<强> 解决方案

如果你想保留超时，那么使用另一个函数并在循环内调用它并在函数内部给出超时如果你想保留超时，请使用下面的解决方案

http://jsfiddle.net/szx19hzo/4/

ng-if

不调用setTimeout函数

2 个答案: