setTimeout和setInterval的深入理解
更新时间：2013年11月08日 17:31:27 作者：
以前写的setTimeout和setInterval的文章有些不足之处，今天抽时间整理了一下，要想真正理解还得从javascript的单线程机制说起
大概半年前发表过一篇关于setTimeout和setInterval的文章，但是现在回去仔细一看发现其实存在很多不足以及错误。事实上，setTimeout和setInterval并没有我们字面上理解的那么简单。要真正掌握并理解这两个方法，还得从javascript的单线程机制说起。
【开门见山】setTimeout和setInterval是如何工作的呢？
我们知道，js是单线程执行的。所以其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。
而如何计算插入的时间点呢？自然是要用到我们所说的timer，也就是计时器。当执行setTimeout和setInterval的时候，timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时，就触发timer callback，也就是我们设定的回调函数：
function fn() {
/*
here is some codes
*/
setTimeout(function() {alert('ok!')},1000);
}
上面这个例子就是我们通常的用法，应该容易理解。可是，timer真的能那么准确么？代码队列的执行真的能那么正常么？
【斩草除根】重新认识所谓的“异步”
刚刚已经知道，事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行（或者说异步执行）。但是事实上所谓的异步只是一个假象——它同样运行在一个线程上！
那么问题就来了，要是在代码插入点前的代码执行时间超过了传入setTimeout或setInterval的设定时间会怎样呢？让我们来看看这段代码：
function fn() {
setTimeout(function(){alert('can you see me?');},1000);
while(true) {}
}
你觉得这段代码的执行结果是什么呢？答案是，alert永远不会出现。
这是为什么呢？因为，while这段代码没有执行完，插入在后面的代码便永远不会执行。
综上所述，其实JS终归是单线程产物。无论如何“异步”都不可能突破单线程这个障碍。所以许多的“异步调用”（包括Ajax）事实上也只是“伪异步”而已。只要理解了这么一个概念，也许理解setTimeout和setInterval也就不难了。
【开门见山】setTimeout和setInterval是如何工作的呢？
我们知道，js是单线程执行的。所以其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。
而如何计算插入的时间点呢？自然是要用到我们所说的timer，也就是计时器。当执行setTimeout和setInterval的时候，timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时，就触发timer callback，也就是我们设定的回调函数：
复制代码 代码如下:
function fn() {
/*
here is some codes
*/
setTimeout(function() {alert('ok!')},1000);
}
上面这个例子就是我们通常的用法，应该容易理解。可是，timer真的能那么准确么？代码队列的执行真的能那么正常么？
【斩草除根】重新认识所谓的“异步”
刚刚已经知道，事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行（或者说异步执行）。但是事实上所谓的异步只是一个假象——它同样运行在一个线程上！
那么问题就来了，要是在代码插入点前的代码执行时间超过了传入setTimeout或setInterval的设定时间会怎样呢？让我们来看看这段代码：
复制代码 代码如下:
function fn() {
setTimeout(function(){alert('can you see me?');},1000);
while(true) {}
}
你觉得这段代码的执行结果是什么呢？答案是，alert永远不会出现。
这是为什么呢？因为，while这段代码没有执行完，插入在后面的代码便永远不会执行。
综上所述，其实JS终归是单线程产物。无论如何“异步”都不可能突破单线程这个障碍。所以许多的“异步调用”（包括Ajax）事实上也只是“伪异步”而已。只要理解了这么一个概念，也许理解setTimeout和setInterval也就不难了。
您可能感兴趣的文章:
- js基于setTimeout与setInterval实现多线程
- 深入理解setTimeout函数和setInterval函数
- 快速掌握Node.js中setTimeout和setInterval的使用方法
- JavaScript中setTimeout和setInterval函数的传参及调用
- JavaScript中SetInterval与setTimeout的用法详解
- javascript中SetInterval与setTimeout的定时器用法
- Javascript中setTimeOut和setInterval的定时器用法
- JavaScript中停止执行setInterval和setTimeout事件的方法
- js中的setInterval和setTimeout使用实例
- JavaScript SetInterval与setTimeout使用方法详解
- BOM系列第二篇之定时器requestAnimationFrame
- BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
- BOM系列第一篇之定时器setTimeout和setInterval
相关文章
javascript基础的动画教程，直观易懂...2007-01-01
这篇文章主要介绍了javascript判断office版本示例,需要的朋友可以参考下2014-04-04
本文主要介绍了javascript的一些基础性的东西，包括javascript简介，及<script>元素的介绍等，并通过示例让大家更好的理解javascript，非常不错，推荐给大家。2015-01-01
在Web前端开发中，我们经常需要判断变量的数据类型。鉴于ECMAScript是松散类型的，因此需要有一种手段来检测给定变量的数据类型——typeof就是负责提供这方便信息的操作符。2014-04-04
其实Javascript中没有类这个定义，但是有类这个概念。很多人都写过这样的代码，就是一个关键字 function，然后定义一个方法名，方法名后紧跟一对括号。如果你在项目中写过这样的代码，那么祝贺你，你可以不费任何吹毛之力，就能一口气读完这篇文章了。2014-09-09
本文是对javascript中的内存管理进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
Document想必大家并不陌生吧，在使用js的过程中会经常遇到它，那么它有哪些属性、哪些方法，在本文将以示例为大家详细介绍下，希望对大家有所帮助2013-09-09
下面小编就为大家带来一篇JS操作DOM的一些常用方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了javascript实现playfair和hill密码算法,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JavaScript中let避免闭包造成问题,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
最新评论