JavaScript - setTimeout()/clearTimeout()

Question

为什么这个函数打印出 0 1 2 而不是 0 1 2 3？

(function fn1(){
    for (var i = 0; i < 4; i++) {
        var tc=setTimeout(function(i){
            console.log(i);
            clearTimeout(tc);
        }, 10, i);
    }
})();

Answer 1

var 当然会被提升，所以在 for 循环中 tc 会(同步)重新分配多次并最终成为 < em>最终 setTimeout。因此，每次超时函数运行时，它都会引用相同的 tc，该 tc 引用最终迭代的超时并使用 clearTimeout 将其清除。对于解释器来说，它看起来像这样:

(function fn1() {
  var tc;
  var i;
  for (i = 0; i < 4; i++) {
    tc = setTimeout(function(i) {
      console.log(i);
      clearTimeout(tc);
    }, 10, i);
  }
})();

如果您想打印出 0 1 2 3，请改用 let(let 具有 block 作用域，并且未提升)给每个迭代一个单独的 tc 绑定(bind):

(function fn1() {
  for (let i = 0; i < 4; i++) {
    let tc = setTimeout(function(i) {
      console.log(i);
      clearTimeout(tc);
    }, 10, i);
  }
})();