Question

这是我目前的代码：

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秒，整个intervall / thing会暂停10秒钟。基本上意味着它将显示第3个div 10秒，暂停间隔并删除第3个div的隐藏类（是的，类命名实际应该显示）然后再继续显示1秒的所有其他div。现在它基本上会跳过第3个div，因为intervall会覆盖settimetout。

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

，您的代码将是：

{{1}}

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

Answer 2

我会在这里使用setTimeout s而不是setInterval链：

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

Answer 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/

SetInterval，中间有不同的间隔

3 个答案: