'let'在使用setTimeout()的for循环中

33 浏览
0 Comments

'let'在使用setTimeout()的for循环中

let timer = () => {

for(var i = 0; i < 5; i ++) {

((x) => {

setTimeout(() => {

console.log(x)

}, x * 1000)

})(i);

}

}

timer();

以上代码将以1000ms的间隔打印0、1、2、3、4。

如果我将"let i = 0"改为"var i = 0"，那么timer()将以1000ms的间隔打印5五次。到目前为止一切顺利，我知道了"let"和"var"之间的区别。

但现在我想以1000ms的间隔打印0、1、2、3、4，而且不使用"let"关键字，那我应该怎么做呢？我认为我可能需要使用闭包，但我不知道如何做。编辑：不使用"let"的意思是使用"var"代替。

0

1 答案

0 Comments

在使用setTimeout函数时，如果想在循环中使用let关键字，并通过闭包保存每次循环的变量值，可能会遇到问题。这个问题的出现是因为setTimeout函数是一个异步操作，它会在循环结束后执行，而循环中的变量i已经到达了最终的值，导致每次执行setTimeout函数时，输出的结果都是相同的。

为了解决这个问题，可以使用Immediately Invoked Function Expression（立即调用函数表达式）来包裹setTimeout函数，以便在每次循环中创建一个新的作用域，并将当前循环的变量值作为参数传递给setTimeout函数。

如果想要使代码兼容ES5版本，还需要将箭头函数转换为普通函数。具体的解决方法如下：

let timer = () => {
  for (var i = 0; i < 5; i++) {
    (i => {
      setTimeout(() => {
        console.log(i)
      }, i * 1000)
    })(i)
  }
}
timer();


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

通过以上的解决方法，我们可以在循环中正确地使用let关键字，并且在每次循环中都能够输出正确的结果。

0