时间戳

首页 > 解决方案 > 有人可以帮助解释 for 循环中的 setTimeout 是如何工作的吗？这和闭包有关系吗

javascript - 有人可以帮助解释 for 循环中的 setTimeout 是如何工作的吗？这和闭包有关系吗

问题描述

var result = 0;

for (var i=0; i < 3; i++) {
  setTimeout(function() {
    result += i;
  }, 1000);
}

为什么结果会等于 9 而不是 3？

标签： javascript

解决方案

您得到 9 是因为您要添加result到循环计数器i中，并且每次循环迭代时这两个数字都会增加。如果您只希望最终答案为 3，那么您根本不需要result并且可以在循环的最终迭代时报告循环计数器的值。

目前尚不清楚您的目标是什么，但是当人们想要重复完成某件事时，通常会认为计时器属于循环。计时器可以做到这一点，而无需任何循环通过setInterval()计时器或递归setTimeout()计时器来帮助它。两种方法如下所示：

递归 setTimeout() 定时器：

var result = 0;

function timerCallback(){
  if(result < 3){
    console.log(++result);
    // A second timer is embedded in the
    // first timer's callback function.
    // This second timer calls the current
    // function, setting up a looping flow.
    setTimeout(timerCallback, 1000);
  }
}

// Start a one time timer
setTimeout(timerCallback, 1000);

setInterval() 定时器：

var timer = null; // Will hold reference to timer's id
var result = 0;

function timerCallback(){
  if(result < 3){
    console.log(++result);
  } else {
    // Cancel timer
    clearInterval(timer);
  }
}

// Start a timer that continues
// until it is stopped.
timer = setInterval(timerCallback, 1000);

推荐阅读