Javascript 函数 setTimeout 和 setIntervall 不起作用

Question

我在这里遇到了这个问题，这个函数不起作用，我不知道为什么..这个函数应该数到 10（在 10 秒内）。 为此，我使用带有 setTimeout 函数的 for 循环 - 持续时间设置为 1000 毫秒。

它应该继续下去，因为我采用了 setInterval 函数。

function timer() {
  var time=10;
  for(i=0; i<time; i++){
   setTimeout(console.log(i+1), 1000);
  }
}

setInterval(timer, 10000);

问题是，它不起作用，我不明白为什么......我找到了另一个可行的解决方案，但想知道这个问题。 :)

Answer 1

似乎什么也没发生的原因是您使用setTimeout 。 您调用console.log并尝试使用该调用的返回值作为事件处理程序，而不是提供事件处理程序。

至少可以做一些事情的最接近的事情是创建一个调用console.log的函数：

setTimeout(function(){ console.log(i+1) }, 1000);

但是，您会注意到它只会无限期地每 10 秒一次记录11次值11 。

即使循环从 0 到 9 计数，您也会在每次迭代中启动超时，该超时将在创建后的一秒内触发。 由于所有 10 个超时都是同时创建的，因此它们将同时触发。 每个处理程序都没有单独的变量i ，因此它们都将在触发它们时显示变量中的值，并且当循环在它们中的任何一个被调用之前完成时，它们都将显示最终值10 + 1。

您同时使用间隔和超时，您应该使用其中之一。

您可以在循环中启动超时，但是您应该只执行一次，而不是间隔一次，并且您应该指定从开始到您希望触发它的时间：

var time = 10;
for (var i = 1; i <= time; i++){
  setTimeout(function() { console.log('tick'); }, 1000 * i);
}

如果要在事件处理程序中使用该变量，则需要为每次迭代创建该变量的副本：

var time = 10;
for (var i = 1; i <= time; i++){
  (function(copy){
    setTimeout(function() { console.log(copy); }, 1000 * i);
  })(i);
}

您可以使用间隔，但是您没有循环，间隔就是循环。 当您到达循环末尾时，使用clearInterval停止它：

var i = 1, time = 10, handle;
function timer() {
  console.log(i);
  i++;
  if (i > time) clearInterval(handle);
}

handle = setInterval(timer, 1000);

Answer 2

首先，它不起作用，因为 setTimeout 调用是错误的。 即使您的 setTimeout 调用有效，这里还有另一个问题。 您的代码实际上将每 10 秒打印 11。

 function timer() { var time = 10; for (i = 0; i < time; i++) { setTimeout(function() { console.log(i + 1) }, 1000); } } setInterval(timer, 10000);

因为，您每秒都会执行顺序 setTimeout 调用，并且您正在对变量i形成一个闭包。

您需要处理关闭，并且必须在打印第二个之后完成调用。

 function timer() { var p = Promise.resolve(); for (var i = 0; i < 10; i++) { p = p.then(closure(i)); } } function closure(i) { return (function () { return new Promise(function (resolve) { setTimeout(function () { document.getElementById('results').innerHTML = (i + 1) + '\\n'; resolve(); }, 1000); }) }); } timer(); setInterval(timer, 10000);

 <pre id="results"></pre>

Answer 3

当我在 Firebug 调试器中运行您的代码时，我看到：

TypeError: can't convert console.log(...) to string

我在您的代码中添加了关于该错误的注释：

function timer() {
  var time=10;
  for(i=0; i<time; i++){
  // The source of error is the line below
  // Type error: setTimeout needs a function as first argument!
   setTimeout(console.log(i+1), 1000);
  }
}

setInterval(timer, 10000);

更正的版本可能是

function timer() {
  var time=10;
  for(i=0; i<time; i++){
    setTimeout(function() { console.log(i+1); }, 1000);
  }
}

setInterval(timer, 10000);

但是，上述更改修复了类型错误而不是逻辑。

你可能想这样做：

var counter = 0;

var count = function() {
  console.log(++counter);
  if (counter >= 10) {
    clearInterval(timer);
  }
};

var timer = setInterval(count, 1000);

一旦回调函数count注意到计数器传递了值 10，它将停止在设置时将其 ID 保存在变量timer的周期性定时器。