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. sprint2 项目的粗略展示

  2. wf(四)

    我们已经在c#和xaml上编写了工作流,或者有的人会觉得在xaml上编写的workflow没什么优点,然而其实xaml其实具有一些很特别的优势. 1. xaml支持工作流设计器,c#不支持: 2. x ...

  3. python简单实现用户表单登录

    实现简单的用户表单验证登录 user="desperado" pwd=" s=0 for i in range(10): if s < 3: username = ...

  4. 2016年12月26日 星期一 --出埃及记 Exodus 21:21

    2016年12月26日 星期一 --出埃及记 Exodus 21:21 but he is not to be punished if the slave gets up after a day or ...

  5. linux deepin-scrot 截图工具

    1.下载 .deb 安装包: 点击这里   (如果提示缺少依赖,去终端安装相应的依赖) 2. 设置快捷键Alt+Ctrl+A 1. 系统设置 -> 键盘设置 -> 自定义快捷键 -> ...

  6. asp.net MVC SignalR 与数据库 实时同步显示

    asp.net MVC SignalR 与数据库 实时同步显示 错误:未启用当前数据库的 SQL Server Service Broker,因此查询通知不受支持.如果希望使用通知,请为此数据库启用 ...

  7. Spring 定时任务2

    转载自http://www.cnblogs.com/nick-huang/p/4864737.html > 版本说明 <dependencies> <dependency> ...

  8. 关于无法把程序(Adobe Fireworks CS5)添加到打开方式的解决办法

    关于无法把程序(Adobe Fireworks CS5)添加到打开方式的解决办法 最近换了新版的Adobe Fireworks CS5,发现打开图片文件时在右键“打开方式”里仍然是以前的Firewor ...

  9. Android:Butter Knife 8.0.1配置

    github地址:https://github.com/GarsonZhang/butterknife Butter Knife Field and method binding for Androi ...

  10. sql 函数的理解

    CAST (expression AS data_type) 用于数据的转化 isnull(@s+',','select years,months,') 判断(@s+',')是否为空,注意点,即使(@ ...