Question

我试图在执行一些代码x次后隐藏某个div。然而，这似乎不起作用。

首先，我尝试在for循环中使用setTimeout：

var startCap = 1;
var cap = 5;
for(cap; cap > startCap; cap--){
    setTimeout(function(){              
        startTimeElement.innerHTML = "Starting in " + cap + ".";
    }, 1000);
}

我原本期望上面的结果是显示行，等待一秒，然后继续使用for循环。结果是完全跳过了超时。我尝试记录它，然后显示1，四次，几个毫秒接一个。

然后我尝试使用SetInterval，但这也没有给我想要的结果。两次在进入函数后都将div的样式设置为none，而不是考虑时间。

var startCap = 1;
var cap = 5;
var interval = function(){  
    startTimeElement.innerHTML = "Starting in " + cap + ".";
    cap--
    if(cap < startCap){
        clearInterval(capInterval);
    }
};

var capInterval = setInterval(interval, 1000);

如何等待5秒，每秒更改div的innerHTML，并将div的可见性设置为none？请注意，我不打算使用JQuery或任何其他第三方工具。

添加：我使用以下行更改div的显示。

var startScreenElement = document.getElementsByClassName('startScreen')[0];
startScreenElement.style.display = "none";

此行与超时/间隔功能相同，但直接位于其下方。

Answer 1

在您的第一个代码示例中，您将立即设置四个单独的超时，每个超时需要一秒钟。所有四个都将在大致相同的时间完成。

您需要设置一个可以每秒调用一次的函数。在该功能内执行倒计时。只调用一次并在完成后再次调用它直到计数器达到零。像这样：

var secs = 5;
function runOnceASecond() {
  startTimeElement.innerHTML = "Starting in " + secs + ".";
  secs -= 1;
  if ( secs==0 ) runMyCode();
  else {
    setTimeout(runOnceASecond,1000);
  }
}
runOnceASecond();

然后你的函数runMyCode（）将执行倒计时完成时需要做的事情 - 在你的情况下，执行你的CSS修改。

只要您在调用clearInterval（）时修改CSS，您的第二个代码块就会起作用。

Answer 2

var startScreenElement = document.getElementsByClassName('startScreen')[0];
var cap = 5;

function interval() {
  var startScreenElement;
  if (cap > 0) {
    // countdown code
    cap--;
    startTimeElement.innerHTML = "Starting in " + cap + ".";
    setTimeout(interval, 1000);
  } else {
    // your code when countdown is done
    if (startScreenElement) startScreenElement.style.display = "none";
  }
}
setTimeout(interval, 1000);

Answer 3

setTimeout不会阻止JavaScript执行。这就是为什么它继续执行for循环，调度每个函数几乎在同一时间执行

没有本机睡眠功能AFAIK，你不会想要它，因为它会阻止任何其他JS在页面上执行，直到一切都完成。

您可以安排在不同时间运行超时。

var cap = 5;
for(var i = 0; i < cap; i++){
    setTimeout((function(){
        var remainingTime = cap - i;

        return function(){              
            startTimeElement.innerHTML = "Starting in " + remainingTime + ".";
        }
    })(), 1000 * (i + 1));
}

此外，由于闭包，您需要将剩余时间存储在不同的函数中，否则它将捕获i的最终值。

See fiddle.

在x秒之后隐藏div

3 个答案: