JavaScript中的setTimeout（）函数，以及let与var的某些区别

JS定时器与变量作用域

最新推荐文章于 2022-03-10 23:02:50 发布

原创最新推荐文章于 2022-03-10 23:02:50 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了JavaScript中的setTimeout函数用法，以及let与var声明变量在作用域和循环中的不同表现，通过具体代码示例展示了两者在异步环境下的行为差异。

JavaScript中的setTimeout（）函数，以及let与var的某些区别

setTimeout
var与let

本文内容源于此
还有这里

setTimeout

setTimeout()函数类似于C语言中的sleep()函数，但又有所区别
setTimeout()，是使得 setTimeout()中的函数（即，前的内容）延迟发生（如下图代码即延迟2000ms，即2s）

<!DOCTYPE html>
  <html lang="en">
      <head>
            <meta charset="utf-8">
            <script>
                  setTimeout("alert('hello')",2000);
            </script>
      </head>
     <body>
     </body>
 </html>

var与let

setTimeout()使用var在for中定义
因为var在此定义的作用域是在函数内 (这里的 i 是函数局部变量)，每一次循环的 i 是同一个 i
又因为setTimeout()函数与其内部的函数是异步执行的，即setTimeout（）执行时，内部的函数（下图中timer()）也在执行，
for函数执行完毕，但1s还没到，此时等待执行的函数是
console.log（i） console.log（i） console.log（i） console.log（i） console.log（i）
因为每个循环的 i 是同一个，所以最终输出6 6 6 6 6

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    debugger;
    console.log(i); // 输出6 6 6 6 6
  }, 1000);
}

setTimeout()使用let在for中定义
因为let在此定义的作用域是在函数的块内 (这里的 i 是函数局部变量)，每一次循环的 i 是相互独立的，即本次循环与下次循环的i是无关的
又因为setTimeout()函数与其内部的函数是异步执行的，即setTimeout（）执行时，内部的函数（下图中timer()）也在执行，
for函数执行完毕，但1s还没到，此时等待执行的函数是
console.log（i） console.log（i） console.log（i） console.log（i） console.log（i）
因为每个循环的 i 是同一个，所以最终输出1 2 3 4 5

for (let i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    debugger;
    console.log(i); //输出 1 2 3 4 5
  }, 1000);
}