HTML——js中关于setTimeout不能在循环里面用的原因

杨不旧

已于 2022-02-19 14:30:48 修改

阅读量778

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

于 2021-12-13 18:26:28 首次发布

本文链接：https://blog.csdn.net/qq_45152044/article/details/121909678

版权

JavaScript 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

js中关于setTimeout不能在循环里面用的原因

前言：严谨来说也不是说不能用，只不过会出现跟我们想象的结果出现偏差，而我们就是来分析会出现这个偏差的原因。

这里优先需要引入的概念的是同步线程和异步线程的概念
什么是同步线程呢？
以我自己的话来讲，比如多个程序的执行，需要一个程序接着一个程序地去执行，谁要是哪一个程序出错了，那么整个程序将无法继续运行，会卡在报错的敌方，直到错误的地方解决了，程序才会执行执行。

那什么是异步线程呢？
还是以自己的话来说，比如同时执行执行多个程序，当一个程序出错了，会跳过这个程序去执行剩下的程序。

那么setTimeout()就是异步函数

至于为什么setTimeout不能在循环里面用的原因：请看下面的例子：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    for (var i = 0; i < 10; i++) {
      setTimeout(function () {
        console.log(i)
      }, 2000)
    }
  </script>
</body>
</html>

这里我用到的循环是for循环！！！

讲道理，console.log(i)的结果应该为：0 1 2 3 4 5 6 7 8 9，而且是每隔2秒打印出来

我们运行一下看看实际的结果：
在这里插入图片描述
这个打印结果的意思就是：10被打印了10次（2秒过后一次性打印了10次10）

分析原因：
前面我们说到了，setTimeout()是异步函数，当for循环开始执行的时候，会单独把setTimeout()单独拿出来，先让for循环执行。

也就是for循环每循环一次都会单独把setTimeout()单独拿出来，从0到9即循环了10次，10次都会单独把setTimeout()单独拿出来，
让for循环先执行完毕，当for循环全部执行完毕后才会轮到setTimeout()执行。

有了前面的说明后！！！紧接着再说
而从代码可以看出setTimeout()中括号里面的是在打印i的值
当for循环中i从0加到9，当i=10的时候，不满足条件，就不会执行for循环{}里的函数体，此时i的值为10。
for循环全部执行完毕，i的值为10，for循环循环了10次，则setTimeout()也会执行10次