SetInterval 中间有不同的间隔答案

【问题标题】：SetInterval with different interval in middleSetInterval 中间有不同的间隔
【发布时间】：2014-10-27 19:11:46
【问题描述】：

这是我目前的代码：

var i = 1;
setInterval(function() {
    if ( i != 3 ) {
        document.getElementById("box-" + i).className =
        document.getElementById("box-" + i).className.replace
        ( /(?:^|\s)hide(?!\S)/g , '' )
    } else {
        setTimeout(function() {
            document.getElementById("box-" + i).className =
            document.getElementById("box-" + i).className.replace
            ( /(?:^|\s)hide(?!\S)/g , '' )          
        }, 10000);
    }
    i++
}, 1000);

我想要实现的是每秒钟都会从 div 中删除“隐藏”类。现在这部分工作。

但我还想补充的是，我们在第 3 个 div (i=3) 上，超时实际上是 10 秒，整个间隔/事物会在 10 秒内暂停。基本上意味着它将显示第 3 个 div 10 秒，暂停间隔并删除第 3 个 div 的隐藏类（是的，实际上应该显示类命名），然后再次继续显示所有其他 div 1 秒。现在它基本上跳过了第三个 div，因为 intervall 覆盖了 settimetout。

【问题讨论】：

标签： javascript settimeout setinterval

【解决方案1】：

关键是关于闭包。

使用此代码：

setTimeout(function() {
        document.getElementById("box-" + i).className =
        document.getElementById("box-" + i).className.replace
        ( /(?:^|\s)hide(?!\S)/g , '' )          
    }, 10000);

您认为其中的i 是3，但事实并非如此。

解决办法是：

function handle(i) {
   setTimeout(function() {
        document.getElementById("box-" + i).className =
        document.getElementById("box-" + i).className.replace
        ( /(?:^|\s)hide(?!\S)/g , '' )          
    }, 10000);
};

您的代码将是：

var i = 1;

var interval = setInterval(function() {
    doSomething();
    if (i === 3) {
        doOtherthing(i);
    }
}, 1000);

function doSomething() {
    // do something

    i++;
}

function doOtherthing(tmp) {
    clearInterval(interval);
    setTimeout(function() {
        // do something

        i++;
        interval = setInterval(function() {
            doSomething();
            if (i > 10) {
                clearInterval(interval);
            }
        }, 1000);
    }, 10000);
};

参考http://jsfiddle.net/creeper/pka43o5c/1/

【讨论】：

嗯，它的行为仍然相同。它不显示第三个 div。或者它会在 10 秒后，但是因为它也应该暂停 10 秒的间隔。
这是一个我写来测试的例子，一切正常。 jsfiddle.net/creeper/pka43o5c
是的，也许我写的很糟糕。当它是第 3 点时，整个事情应该停止 10 秒。现在它排在第 4 位、第 5 位等，而第 3 位在 10 秒后出现，并且顺序错误。顺序应该保持不变，1、2、3、4、5、6.. 只有在第 3 点它应该有 10 秒的暂停。

【解决方案2】：

我会在这里使用setTimeouts 链而不是setIntervals：

var i = 1;
setTimeout(function tOutFunc() {
    setTimeout(function() {
        document.getElementById("box-" + i).className =
        document.getElementById("box-" + i).className.replace
        ( /(?:^|\s)hide(?!\S)/g , '' )          
    }, i == 3 ? 10000 : 1000);
    i++
}, 1000);

【讨论】：

【解决方案3】：

这是一个带有递归setTimeout的版本：

var i = 1;
function showBoxes() {
    if(i === 2 ) {
        console.log(i)
        setTimeout(showBoxes, 10000)
        removeClass(i)
    }
    else if(i <= 5) {
        console.log(i)
        setTimeout(showBoxes, 1000)
        removeClass(i)
    }
    ++i;
}

function removeClass(i){
    document.getElementById("box-" + i).className =
    document.getElementById("box-" + i).className.replace
    ( /(?:^|\s)hide(?!\S)/g , '' );
}

setTimeout(showBoxes, 1000);

http://jsfiddle.net/xzh2Lygf/

【讨论】：