通过setTimeout理解js异步原理

最新推荐文章于 2024-05-29 15:14:06 发布

Tomhs3000

最新推荐文章于 2024-05-29 15:14:06 发布

阅读量4.3k

点赞数 1

分类专栏： js 文章标签： setTimeout js异步 javascript

本文链接：https://blog.csdn.net/tomhs3000/article/details/80061501

版权

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

摘要由CSDN通过智能技术生成

在上一篇的文章中介绍了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 tim