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中setFullYear()方法的使用详解
这篇文章主要介绍了JavaScript中setFullYear()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06Mobile Web开发基础之四--处理手机设备的横竖屏问题
这篇文章主要介绍了Mobile Web开发基础之-—处理手机设备的横竖屏,window.orientation属性与onorientationchange事件以及media query方式是开发过程中需要注意到的两种解决方式,需要的朋友可以参考下2017-08-08
最新评论