通过setTimeout理解js异步原理

最新推荐文章于 2025-09-16 17:15:31 发布

原创

最新推荐文章于 2025-09-16 17:15:31 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#setTimeout #js异步 #javascript

本文通过setTimeout函数解析JavaScript的异步执行原理。举例说明了setTimeout的延迟并不是准确的1000毫秒，因为JavaScript是单线程，执行会受当前任务影响。即使setTimeout设置为0，也会有一个最小延迟，不同浏览器和系统有不同的最小时间间隔。

在上一篇的文章中介绍了js异步原理，有的小伙伴可能还有些云里雾里，在本篇文章中将以新手很容易用错的setTimeout为例来解释js的异步原理。

首先我们看一个例子

<script>
  console.log(1);
  setTimeout(function(){
    console.log(2);
  },500);
  console.log(3);
  // 运行结果
  // 1
  // 3
  // 2
</script>

这里通过setTimeout延迟500毫秒执行，所以结果是1，3，2。这看起来明明就是异步操作啊，为什么说是同步呢？我们接着看下一个例子。

<script>
  var date = new Date();
  console.log('first time: ' + date.getTime());
  setTimeout(function(){
      var date1 = new Date();
      console.log('second time: ' + date1.getTime() );
      console.log( date1.getTime() - date.getTime() );
  },1000);
  for(var i=0; i < 10000 ; i++){
      console.log(1);
  }
  // 运行结果
  // first time: 1524540272462
  // （10000）1
  // second time: 1524540274346
  // 1884
</script>