http://ejohn.org/blog/how-javascript-timers-work

这是John的一篇博文说到setTimeout和setInterval的区别,在看js高效图形编程的时候文中提到的。

首先很明显的是:

1. setTimeout是定时触发,在一定的延时后只触发一次,但是可以利用回调一个setTimeout来实现循环触发,比如:

setTimeout(function(){
/* Some long block of code... */
setTimeout(arguments.callee, 10);
}, 10);

而setInterval本身即表示循环触发,直到被取消为止(clearInterval(id);)。

2.JS是单线程的,每一个异步操作被触发时,如果当前正好有其他事件或者函数正在被执行,比如(用户突然点击了鼠标触发了某个onclick事件,我们是不能预测的),那个异步操作就会被压入queue队列中等到当前事件被执行之后再调用。

3.setTimeout被初始化之后被触发时一定会被压到队列中,等待被执行,而setInterval如果被触发时,发现先前有一个interval块再队列中没有被执行,那么他就会丢弃当前这个被触发的interval块,而不将其压入队列中。

这张图片诠释的非常好!可以看到红字的dropped是因为之前的一个interval还没有被执行,所以这个interval就不会被压到队列中。

所以setTimeout被调用的函数是可以预测一定会被执行的,setInterval则不一定,可能会在过程中被丢弃某一次的执行。但是具体是经过多少时间才被执行的,两者都是不能预测的,因为会被其他不可预测的事件阻塞

关于js中的setTimeout和setInterval的更多相关文章

  1. js中的setTimeout和setInterval

    在html页面中要使用自动刷新功能时,可以是使用js中setTimeout和setInterval: 一.使用方法 setTimeout的使用setTimeout('要调用的Js方法', 调用的延迟时 ...

  2. js中的setTimeout和setinterval 用法说明

    setTimeout("countSecond()", 1000)://countSecond()是函数(方法) setTimeout 只执行一次函数,需要传递两个参数1是函数名, ...

  3. js里的setTimeout和setInterval之后的页面是空白,阻塞浏览器的document对象,但是不阻塞script方法

    js里的setTimeout和setInterval是否进程阻塞? 阻塞浏览器的document对象,但是不阻塞script方法 当你在setTimeout中使用document.write时是不行的 ...

  4. QML中实现setTimeout和setInterval

    Qt的QML中,js未提供setTimeout和setInterval,可以通过下面的代码实现. Timer {id: timer} function setTimeout(cb,delayTime) ...

  5. asp.net类似于js中的setTimeOut()的函数作用?

    asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...

  6. js中的SetTimeOut

    1. SetTimeOut()              1.1 SetTimeOut()语法例子              1.2 用SetTimeOut()执行Function           ...

  7. JavaScript中的setTimeout、setInterval和随机函数制作简易抽奖小程序

    几乎所有计算机语言有都内置随机函数.当然这种随机,人们习惯称为伪随机数发生器,产生的是一个[0,1)之间的一个小数.再通过简单算术运算生成一个符合需求的整数.JS中通用公式通常为parseInt(Ma ...

  8. JS中的setTimeout()函数

    1.setTimeout() 方法 setTimeout() 方法用于在指定的毫秒数后调用函数或执行表达式.返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行. s ...

  9. JS动画三剑客——setTimeout、setInterval、requestAnimationFrame

    一.前言 前端实现动画效果主要有以下几种方法:CSS3中的transition 和 animation ,Javascript 中可以通过定时器 setTimeout.setinterval,HTML ...

随机推荐

  1. 关于ajax伪实时动态下拉显示最新数据

    var list= data.data.list; //list是ajax返回的数组Array].Id).length>) { return false; } //$("#learnL ...

  2. php入门

    最近公司招了几个应届毕业生,他们对前端的了解还挺多,但是对后端的技术一无所知,我觉得,作为一个前端攻城狮,如果你有远大的抱负,就应该雨露均沾... 今天我就跟大家讲一讲PHP最基本的入门,至少别人问起 ...

  3. 用excel做差异表达

    首先准备数据:表达矩阵 ACC.uncv2.mRNAseq_RSEM_normalized_log2.txt(以下载的TCGA的数据,log之后的) 上面数据中01为tumor,11为normal 我 ...

  4. C#中调用Matlab人工神经网络算法实现手写数字识别

    手写数字识别实现 设计技术参数:通过由数字构成的图像,自动实现几个不同数字的识别,设计识别方法,有较高的识别率 关键字:二值化  投影  矩阵  目标定位  Matlab 手写数字图像识别简介: 手写 ...

  5. table插件实现

    选择.取消.全选.全部取消.获取行ids /** * Created by lizongqiong on 2016/1/8. */ var $ = require('jquery'); var tab ...

  6. Head First 设计模式 --9 迭代器模式 组合模式

    迭代器模式:提供一种方法书序访问一个聚合对象中的各个元素,而又不暴露其内部的表示. 用到的设计原则:1.封装变化2.多用组合,少用继承|3.针对接口编程,不针对实现编程4.松耦合5.对扩展开放,对修改 ...

  7. laravel 控制器里 redirect url地址传两个参数的方法

    public function red_search() { $url=Request::all(); return redirect('search/'.$url['category'].'/'.$ ...

  8. Yii批量添加的问题

    使用Yii进行批量添加的时候,执行后会发现表中只插入了foreach循环的最后一条数据,而其它数据没有添加成功,那是因为内存地址中循环时新一条数据会覆盖前一条数据,解决办法如下: 第一种方法: < ...

  9. 转linq中的Single()、First()、Take(1) LINQ 标准的查询操作符 排序 orderby、thenby、Take

    Single():操作一个集合,同时强要求只有一个对象匹配,并返回这一个. First():操作一个集合,可以有多个对象匹配,但是只返回第一个. Take(1):操作一个集合,可以有对个对象匹配,单只 ...

  10. 如何编写android ANE

    1.编写AndroidAne.jar: a.编写SkyContext.java: import java.util.HashMap;import java.util.Map;import com.ad ...