javascript - 有没有办法让 setInterval 仅在经过一定时间后才触发？

Question

我有

var slideIn1 = setInterval(slideBarIn1, 1)

我也有

var slideIn2 = setInterval(slideBarIn2, 1)

我希望第二个setInterval在slideIn1上使用clearInterval后几秒钟生效。
我尝试使用 setTimeout 在几秒钟后调用第二个 setInterval，但是 setInterval 在页面加载时触发...有什么建议吗？

function slideBarIn1(){
    barPosition1 = barPosition1 - 0.7;
    verticalBar.style.left = barPosition1+"px";

    if (barPosition1 < (-320)) {
        clearInterval(slideIn1);
    }   
}

function slideBarIn2(){
    barPosition2 = barPosition2 - 0.7;
    horizontalBar.style.top = barPosition2+"px";

    if (barPosition2 < (-320)) {
        clearInterval(slideIn2);
    }   
}

Answer 1

如果我理解正确的话，您想要:1) 等待页面加载。2) 等待 1 秒钟。3) 执行slideBarIn1。4) 等待 1 秒钟。5) 执行slideBarIn2。6) 等待(未指定)秒。7) 返回步骤3 - 执行slideBarIn1。

我建议不要使用 setInterval 或 setInterval 和 setTimeout 的组合，并将它们替换为策略性放置的“setTimeout”。

下面是一个在slideBarIn1和slideBarIn2之间交替的示例，其间有1秒的延迟。

/* Wait until page loaded and then start the first sequence */
window.onload = function() {
// Execute slideBarIn1 in 1 second (1000 milliseconds)
    setTimeout(slideBarIn1, 1000); 
};
function slideBarIn1() {
    //Do whatever slideBarIn1 needs to do
    //And then, before leaving this function
    // start a timer for slideBarIn2
    setTimeout(slideBarIn2, 1000);
}
const delayBetweenTwoAndOne = 1000; // set to zero for no delay
function slideBarIn2() {
    // Do whatever slideBarIn2 needs to do
    // If you wish to keep the loop going, 
    // you can now set another timer for slideBarIn1
    setTimeout(slideBarIn1, delayBetweenTwoAndOne); 
}