理解John Resig 在 How JavaScript Timers Work

原理分析

timer(setInterval,setTimeout)有一个很重要的概念,时间延迟的长短是不稳定的。因为所有的javascript都是在单一线程中执行,那些异步的事件(比如说鼠标点击,或者timer)只在执行期出现空闲的时候才会运行。下图能很好的说明这个情况。

此例中有三个异步事件,鼠标点击,setTimeout,setInterval。

先介绍一下这个图的构成,左侧以10为间隔的横杠是以ms为单位从上至下的时间轴,蓝色的圆角正方形代表正在执行的代码块(这由单线程本质决定,javascript代码是以块运行的)。就比如,第一个模块执行了一些javascript代码,时间约为18ms,第二个模块鼠标点击后执行的函数花了约11ms。

下面我们详细解释这个图的运行流程和原理。

从上开始,在3ms(都是近似值)的位置执行了setTimeout(fn,10ms),然后它计时器开始计时;7ms时点击事件触发,立即添加点击回调函数到队列中;10ms执行setInterval(fn,10ms),它的计时器开始计时。下面到13ms时,这时3ms的setTimeout已经计时完毕,触发,它的fn回调函数添加到队列中。第一个块执行完毕。

此时我们的队列中堆积了我们将要执行的回调函数。依次为鼠标点击回调函数,setTimeout回调函数,取在前的,第二个的代码块将要执行的是鼠标点击的回调函数。开始执行第二个块,运行到20ms时,setInterval事件触发,回调函数添加到队列中。第二个块执行完毕。

此时我们的队列中有setTimeout,setInterval回调函数。下面执行setTimeout的回调函数。注意!到30ms时,setInterval事件又一次触发,在队列里有相同的回调函数时,这个新的setInterval回调函数会被浏览器忽略掉。第三个块执行完毕。

此时我们的队列里只有setInterval回调函数,下面执行setInterval的回调函数。到40ms时,setInterval事件触发,使得刚为空的队列里又多了一个setInterval回调函数。第四个块执行完毕。

此时我们的队列里有setInterval回调函数,执行setInterval回调函数。到结束都没产生任何下面要执行的代码。第五个模块完毕。

到50ms时,触发setInterval,队列里添加它的回调函数,因为目前没有任何代码块在执行,所以队列的代码直接执行。

三个异步事件的执行情况:

鼠标点击7ms触发,18ms才执行。

setTimeout,3ms开始,13ms触发,29ms才执行回调函数。

setInterval,10ms开始,20ms触发,30ms触发被丢弃,36ms执行回调函数;40ms触发,41ms执行回调函数;50ms触发,50ms执行回调函数。

下面给出setTimeout的测试实例

function a() {
  setTimeout(function(){console.log(1)},0)
  console.log(2)
}
a()//
//
function(){console.log(1)}被放在了一个下一个块中。

下面是对上述原理的总结

  • JavaScript引擎只有一个线程,这使得异步事件必需列队等待执行。
  • setTimeout一定会和setInterval在如何执行代码上有着本质地区别。
  • 如果一个timer在将要执行的时候被阻塞,它将会等待下一个时机(比预期的延时要长)。
  • 如果interval的执行时间较长(比指定的延时长),那么它们将连续地执行而没有延时。

原理利用

先简单讲一下在javascript中,假如大量修改DOM的操作,在内存富裕的情况,DOM会操作被分成最小片,约莫两三个操作,然后在浏览器渲染一次页面。而在内存吃紧的情况,浏览器会将许多DOM操作合并到一起,再渲染页面,以提高效率,而我们的js操作

一时没找到很好的实例,

JavaScript中的计时器原理的更多相关文章

  1. JavaScript中new实现原理

    JavaScript中new实现原理 1.创建一个空对象 obj 2.将该对象 obj 的原型链 __proto__ 指向构造函数的原型 prototype, 并且在原型链 __proto__ 上设置 ...

  2. JavaScript 中 this 的原理

    一.问题 学习 JavaScript 其中一个标志就是理解下面两种写法,会输出有不一样的结果. var obj = { foo: function () {} }; var foo = obj.foo ...

  3. javaScript中的闭包原理 (译)

    这篇文章通过javaScript代码解释了闭包的原理,来让编程人员理解闭包.它不是写给大牛或使用功能性语言进行编程的程序员的.一旦意会了其核心概念,闭包理解起来并不难.然而,你不可能通过阅读任何有关闭 ...

  4. javascript中的计时器

    javascript中的定时器有两种:一种是一次性定时器,一种是可以持续使用的定时器: 1:一次性定时器setTimeout(a,b):兼容ie的任何版本 该方法接受两个参数,第一个是要执行的代码,第 ...

  5. 剖析Javascript中forEach()底层原理,如何重写forEach()

    我们平时用的forEach()一般是这样用的 var myArr = [1,5,8] myArr.forEach((v,i)=>{ console.log(v,i) })//运行后是这样的1 0 ...

  6. JavaScript中this对象原理简洁说明

    今天看了阮一峰大神的博客文章:JavaScript 的this原理,把纠结很久的this的指向终于理解清楚了 原文:http://www.ruanyifeng.com/blog/2018/06/jav ...

  7. JavaScript中的继承(原型链)

    一.原型链 ECMAScript中将原型链作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 实例1: function SupType() { this.pro ...

  8. 领悟 JavaScript 中的面向对象

    JavaScript是基于对象的语言,我们可以使用面向对象的思想去开发js代码. JavaScript是基于对象的语言. 可以使用面向对象的思想,但是不少人对这一点理解得并不全面. 在 JavaScr ...

  9. JavaScript中this的工作原理以及注意事项

    在JavaScript中,this 的概念比较复杂.除了在面向对象编程中,this 还是随处可用的.这篇文章介绍了this 的工作原理,它会造成什么样的问题以及this 的相关例子. 要根据this  ...

随机推荐

  1. poj 1887 Testing the CATCHER_最长上升子序列

    题意:题目太长没看,直接看输入输出猜出是最长下降子序列 用了以前的代码直接a了,做法类似贪心,把最小的顺序数存在数组里面,每次二分更新数组得出最长上升子序列 #include<iostream& ...

  2. pushMeBaby,github链接

    https://github.com/stefanhafeneger/PushMeBaby

  3. hdu 1279 验证角谷猜想(简单的模拟)

    Problem Description 数论中有许多猜想尚未解决,其中有一个被称为“角谷猜想”的问题,该问题在五.六十年代的美国多个著名高校中曾风行一时,这个问题是这样描述的:任何一个大于一的自然数, ...

  4. Ajax请求ashx返回各类数据的常见处理方式

    .请求text数据,在success事件中手动解析 前台: $.ajax({ type: "post", url: "checkFile.ashx", data ...

  5. Lucene 4.4 依据Int类型字段删除索引

    1.方法一,通过Term删除 Term构造中没有.Int类型须要转换成Lucene自带的类BytesRef . /** * 依据商品ID删除索引文件 * @param id */ public voi ...

  6. uva 10161 Ant on a Chessboard 蛇形矩阵 简单数学题

    题目给出如下表的一个矩阵: (红字表示行数或列数) 25 24 23 22 21 5 10 11 12 13 20 9 8 7 14 19 3 2 3 6 15 18 2 1 4 5 16 17 1 ...

  7. LeetCode Day3

     Lowest Common Ancestor of a Binary Search Tree import java.util.ArrayList; import java.util.List; / ...

  8. ios消息的交互方式

    注意这些都是界面回传(即从第二个界面传到第一个界面,从第一个界面传到第二个界面的时候用第二个界面的属性即可)   iOS消息的交互方式有4种,分别为:通知,代理,block,kvo 现在我们对这个4中 ...

  9. UVa 1583 - Digit Generator

    A+A的每一位的数字的和=B 问你每一个B对应 的最小的A 是多少 不然输出0: #include <cstdio> #include <iostream> #include ...

  10. imagemagick 图像处理扩展

    做图像处理的一个工具. http://www.imagemagick.org/script/command-line-processing.php 支持命令行模式,支持接口调用.php 等等都可以,看 ...