setTimeout 函数未被调用

Question

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

基本上，我使用的是 sprite 图像，需要循环遍历其中的图像。在下面的代码块中，您会发现我现在采用的方法。但是，添加 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 后才会被调用（无论 for 循环结束）！！

查看下面的内容fiddle（查看控制台）

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

不要在hasClass函数中使用.

您可以删除超时以使其工作，检查下面的内容 link（检查控制台并检查元素以注意 class 已删除）

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

解决方案

如果你想保留超时，然后使用不同的函数并在循环内调用它，并在函数内给出超时如果你想使用下面的解决方案保留超时

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

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

setTimeout 函数未被调用

setTimeout function is not called

javascript

jquery

settimeout