Javascript函数setTimeout和setIntervall不起作用

Javascript function setTimeout and setIntervall not working

本文关键字：setIntervall 不起作用 setTimeout 函数 Javascript      更新时间：2023-09-26

我在这里遇到了这个问题，这个函数不工作，我不知道为什么…这个函数应该计数到10(10秒内)。为此，我使用一个带有setTimeout函数的For循环-持续时间设置为1000ms。

对于我取的setInterval函数，它应该继续下去。

function timer() {
  var time=10;
  for(i=0; i<time; i++){
   setTimeout(console.log(i+1), 1000);
  }
}
setInterval(timer, 10000);
问题是，它不起作用，我不明白为什么……我已经找到了另一个可行的解决方案，但我想知道这个解决方案的问题。:)

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

最接近的方法是创建一个调用console.log的函数:

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

但是，您将注意到它一次只记录值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);

首先，它不工作，因为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>

当我在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中的周期性计时器。

相关文章：