阅读《深入理解JavaScript定时机制》

简介:

鸟哥的这篇《深入理解JavaScript定时机制》从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理。

看完的体验就是主要要记住两点:

javascript的引擎是单线程的

javascript的引擎是基于事件驱动的

setTimeout和setInterval都是往事件队列中增加一个待处理事件而已。setTimeout是触发一次,而setInterval是循环触发。

但是

想要使用setTimeout循环触发

可以这样做:

1
2
3
4
setTimeout( function () {
         /* 代码块... */
         setTimeout(arguments.callee, 10);
}, 10);

这个看起来和

1
2
3
setInterval( function (){
         /*代码块... */
}, 10);

但是上一份代码中,是执行完了代码块,才挂起来这个事件,所以两次执行时间会大于10,而第二份代码,是自动在10的时候挂上这个事件,所以两次事件相隔的时间会小于等于10(这个说法还是有点憋屈。。。)

但是要明确:

当线程阻塞在一个事件的时候,不管是使用setInterval还是setTimeout都需要等待当前事件处理完才能执行。

比如下面例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
 
function  sleep(d){
     document.write( Date .now() + "<br>" );
     for ( var  t = Date .now(); Date .now() - t <= d;) {
 
     }
}
 
setInterval( function () {
     sleep(9123)
}, 1000);
 
</script>

它不会是1s打印一次,而是大约9s才打印一次,这就是由于线程被阻塞在for循环中了。



本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/p/3469820.html,如需转载请自行联系原作者

相关文章
|
1月前
|
设计模式 JavaScript 前端开发
深入理解 JavaScript 中的绑定机制(下)
深入理解 JavaScript 中的绑定机制(下)
|
1月前
|
JavaScript 前端开发
深入理解 JavaScript 中的绑定机制(上)
深入理解 JavaScript 中的绑定机制(上)
|
3月前
|
JavaScript 前端开发 数据库连接
js的异常程序处理机制
js的异常程序处理机制
18 0
|
3月前
|
存储 前端开发 JavaScript
深入理解前端JavaScript执行机制
深入理解前端JavaScript执行机制
41 0
|
23天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
11 1
|
24天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
28天前
|
消息中间件 前端开发 JavaScript
深入理解JavaScript中的事件循环机制
JavaScript作为一种前端开发必备的编程语言,在处理异步操作时常常涉及到事件循环机制。本文将深入探讨JavaScript中事件循环的工作原理,帮助读者更好地理解和运用这一关键概念。
|
1月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
1月前
|
JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(上)
|
2月前
|
消息中间件 存储 前端开发
理解JavaScript事件循环机制
理解JavaScript事件循环机制
18 0