javascript - 循环中的 setTimeout：回调发生时没有延迟

Question

我四处搜索，发现其他一些有类似问题的人，但我似乎找不到解决方案或明确的解释。

var content = 'test<br />';

for( var i = 1; i < 6; i++ ) {
    setTimeout(function() {
        document.write(content);
    }, 3000);
}

我希望 for 循环中的代码执行 5 次，每个循环之间有 3 秒的延迟。当它运行时，至少从表面上看，页面加载时看起来像是延迟了三秒，然后毫无延迟地通过所有循环。

我错过了什么？

Answer 1

您的问题是所有呼叫都在 3000 毫秒后发生。每隔 3 秒执行一次呼叫，请执行以下操作：

var content = 'test<br />';

for( var i = 1; i < 6; i++ ) {
    setTimeout(function() {
        document.write(content);
    }, 3000 * i);
}

Answer 2

您可能需要使用setInterval（因为您试图以某个“间隔”运行代码）

// first create an isolated namespace because we don't need to dirty the global ns //
(function(){
  var counter = 0;
  var maxIterations = 6;
  var intervalReference = setInterval(function(){

    // your code goes here //
    alert('test');

    // the stop condition //
    ++counter;
    if (counter == maxIterations) {
      clearInterval(intervalReference);
    }
  }, 3000);
}())

Answer 3

setInterval 可能是要走的路（请参阅 Alin 的回答），但如果您想沿着 setTimeout 路线走，代码将如下所示：

var loop = 0;
var content = "test<br>";

function startTimeout(init){
  if(init!==true){
    document.write(content);
    loop++;
  }

  if(loop<5){
    setTimeout(startTimeout, 3000);
  }
}

startTimeout(true);