JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。

一、什么是定时器

JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下

setTimeout: 设置一个定时器,在定时器到期后执行一次函数或代码段

var timeoutId = window.setTimeout(func[, delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code[, delay]);
  • timeoutId: 定时器ID
  • func: 延迟后执行的函数
  • code: 延迟后执行的代码字符串,不推荐使用原理类似eval()
  • delay: 延迟的时间(单位:毫秒),默认值为0
  • param1,param2: 向延迟函数传递而外的参数,IE9以上支持

setInterval: 以固定的时间间隔重复调用一个函数或者代码段

var intervalId = window.setInterval(func, delay[, param1, param2, ...]);
var intervalId = window.setInterval(code, delay);
  • intervalId: 重复操作的ID
  • func: 延迟调用的函数
  • code: 代码段
  • delay: 延迟时间,没有默认值

setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现),类似setTimeout(func, 0)

var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);
  • immediateId: 定时器ID
  • func: 回调

requestAnimationFrame: 专门为实现高性能的帧动画而设计的API,但是不能指定延迟时间,而是根据浏览器的刷新频率而定(帧)

var requestId = window.requestAnimationFrame(func);
  • func: 回调

上面简单的介绍了四种JS的定时器,而本文将会主要介绍比较常用的两种:setTimeout和setInterval。

二、举个栗子

  • 基本用法
// 下面代码执行之后会输出什么?
var intervalId, timeoutId; timeoutId = setTimeout(function () {
console.log(1);
}, 300); setTimeout(function () {
clearTimeout(timeoutId);
console.log(2);
}, 100); setTimeout('console.log("5")', 400); intervalId = setInterval(function () {
console.log(4);
clearInterval(intervalId);
}, 200); // 分别输出: 2、4、5
  • setInterval 和 setTimeout的区别?
// 执行在面的代码块会输出什么?
setTimeout(function () {
console.log('timeout');
}, 1000); setInterval(function () {
console.log('interval')
}, 1000); // 输出一次 timeout,每隔1S输出一次 interval /*--------------------------------*/ // 通过setTimeout模拟setInterval 和 setInterval有啥区别么?
var callback = function () {
if (times++ > max) {
clearTimeout(timeoutId);
clearInterval(intervalId);
} console.log('start', Date.now() - start);
for (var i = 0; i < 990000000; i++) {}
console.log('end', Date.now() - start);
},
delay = 100,
times = 0,
max = 5,
start = Date.now(),
intervalId, timeoutId; function imitateInterval(fn, delay) {
timeoutId = setTimeout(function () {
fn(); if (times <= max) {
imitateInterval(fn ,delay);
}
}, delay);
} imitateInterval(callback, delay);
intervalId = setInterval(callback, delay);

如果是setTimeout和setInterval的话,它俩仅仅在执行次数上有区别,setTimeout一次、setIntervaln次。

而通过setTimeout模拟的setInterval与setInterval的区别则在于:setTimeout只有在回调完成之后才会去调用下一次定时器,而setInterval则不管回调函数的执行情况,当到达规定时间就会在事件队列中插入一个执行回调的事件,所以在选择定时器的方式时需要考虑setInterval的这种特性是否会对你的业务代码有什么影响?

  • setTimeout(func, 0) 和 setImmediate(func)谁更快?(仅仅是好奇,才写的这段测试)
console.time('immediate');
console.time('timeout'); setImmediate(() => {
console.timeEnd('immediate');
}); setTimeout(() => {
console.timeEnd('timeout');
}, 0);

在Node.JS v6.7.0中测试发现setTimeout更早执行

  • 面试题

下面代码运行后的结果是什么?

// 题目一
var t = true; setTimeout(function(){
t = false;
}, 1000); while(t){} alert('end'); /*--------------------------------*/ // 题目二
for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 0);
} /*--------------------------------*/ // 题目三
var obj = {
msg: 'obj',
shout: function () {
alert(this.msg);
},
waitAndShout: function() {
setTimeout(function () {
this.shout();
}, 0);
}
};
obj.waitAndShout();

问题答案会在后面解答

三、JS定时器的工作原理

在解释上面问题的答案之前我们先来了解一下定时器的工作原理,这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理,该图为一个简单版的原理图。

上图中,左侧数字代表时间,单位毫秒;左侧文字代表某一个操作完成后,浏览器去询问当前队列中存在哪些正在等待执行的操作;蓝色方块表示正在执行的代码块;右侧文字代表在代码运行过程中,出现哪些异步事件。该图大致流程如下:

  • 程序开始时,有一个JS代码块开始执行,执行时长约为18ms,在执行过程中有3个异步事件触发,其中包括一个setTimeout、鼠标点击事件、setInterval
  • 第一个setTimeout先运行,延迟时间为10ms,稍后鼠标事件出现,浏览器在事件队列中插入点击的回调函数,稍后setInterval运行,10ms到达之后,setTimeout向事件队列中插入setTimeout的回调
  • 当第一个代码块执行完成后,浏览器查看队列中有哪些事件在等待,他取出排在队列最前面的代码来执行
  • 在浏览器处理鼠标点击回调时,setInterval再次检查到到达延迟时间,他将再次向事件队列中插入一个interval的回调,以后每隔指定的延迟时间之后都会向队列中插入一个回调
  • 后面浏览器将在执行完当前队头的代码之后,将再次取出目前队头的事件来执行

这里只是对定时器的原理做一个简单版的描述,实际的处理过程比这个复杂。

四、题目答案

好啦,我们现在再来看看上面的面试题的答案。

第一题

alert永远都不会执行,因为JS是单线程的,且定时器的回调将在等待当前正在执行的任务完成后才执行,而while(t) {}直接就进入了死循环一直占用线程,不给回调函数执行机会

第二题

代码会输出 5 5 5 5 5,理由同上,当i = 0时,生成一个定时器,将回调插入到事件队列中,等待当前队列中无任务执行时立即执行,而此时for循环正在执行,所以回调被搁置。当for循环执行完成后,队列中存在着5个回调函数,他们的都将执行console.log(i)的操作,因为当前JS代码上中并没有使用块级作用域,所以i的值在for循环结束后一直为5,所以代码将输出5个5

第三题

这个问题涉及到this的指向问题,由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上. 这会导致这些代码中包含的this关键字会指向window (或全局)对象,window对象中并不存在shout方法,所以就会报错,修改方案如下:

var obj = {
msg: 'obj',
shout: function () {
alert(this.msg);
},
waitAndShout: function() {
var self = this; // 这里将this赋给一个变量
setTimeout(function () {
self.shout();
}, 0);
}
};
obj.waitAndShout();

五、需要注意的点

  • setTimeout有最小时间间隔限制,HTML5标准为4ms,小于4ms按照4ms处理,但是每个浏览器实现的最小间隔都不同
  • 因为JS引擎只有一个线程,所以它将会强制异步事件排队执行
  • 如果setInterval的回调执行时间长于指定的延迟,setInterval将无间隔的一个接一个执行
  • this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决

六、参考

原文:http://ssh.today/blog/something-about-js-timer

JS 定时器的4种写法及介绍的更多相关文章

  1. JS面向对象的几种写法

    JS 中,面向对象有几种写法.归纳下,大概有下面这几种:工厂模式,构造函数模式,原型模式,构造函数与原型模式的混合使用,原型链继承,借用构造函数继承. 一.工厂模式 function person ( ...

  2. [JS] 面向对象的5种写法和拓展JS对象的写法

    面向对象的JAVA  最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...

  3. js面向对象的五种写法

    第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = functio ...

  4. (转载)无缝滚动图片的js和jquery两种写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js类的几种写法

    我们常用的有以下几种方法来用JavaScript写一个“类”: 1. 构造函数(public属性和方法) 1: function Person(iName, iAge){ 2: this.name=i ...

  6. js和jquery 两种写法 鼠标经过图片切换背景效果

    这个是javascript的写法 <img src="res/img/shop-c_32.jpg" alt="" onmouseover="th ...

  7. js对象的两种写法

    <script>     //定义一个对象,提供对应的方法或者属性     var s = {         sd1: function () { },         sd2: fun ...

  8. JS冒泡排序的6种写法(武当雄风)

    天下英雄出我辈,一入江湖岁月催.鸿图霸业谈笑间,不胜人生一场醉. 武当山上,一年一度的试道大会又开始了... 众武当弟子摩拳擦掌都想在此次试道大会上一展风采... 张三丰临终前曾留下一句话:试道大会采 ...

  9. jquery 在页面中三种写法

    jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x ...

随机推荐

  1. 关于下载gitbash客户端

    gitbash的安装包找不到了,最近又在准备新机器的环境,需要安装git客户端. https://www.git-scm.com/,网址找到了,但是下载非常缓慢.搜了一下,都是改host,但是改了也没 ...

  2. 动画 jquery-transit

    <script type="text/javascript" src="js/jquery.min.js"></script> < ...

  3. MySQL 启动、登录、退出和目录结构

    一.启动 MySQL 服务器启动方式有两种: (1)通过服务的方式自动启动 (2)手动启动的方式 1.windows 服务方式启动 操作步骤: 也可以在 cmd 窗口 输入 services.msc ...

  4. 【日语】【ZZ】日语人称小结

    [ZZ]日语人称小结 日语中有关人称的词很多,也有不少朋友问 现整理了一下,希望能对那些不太清楚的朋友有点帮助 如果您认为在下有写错的地方,或者您有什么高见,请不吝赐教 第一人称 “我” 1.私 わた ...

  5. 小数据玩转Pyspark(2)

    一.客户画像 客户画像应用:精准营销(精准预测.个性化推荐.联合营销):风险管控(高风险用户识别.异常用户识别.高可疑交易识别):运营优化(快速决策.产品组合优化.舆情分析.服务升级):业务创新(批量 ...

  6. coco creator编辑动画坑之拖图片

    如图所示,批量选中多张图片之后,拖到右下角的框中,发现有时候可以有时候不行.这个我觉得是个软件的bug 后来经过测试发现只有在粉红色圈的高度才可以正确放入图片,否则都放不了.

  7. stm32 视频小车

    1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 ...

  8. 织梦dede:channelartlist调用排除指定typeid栏目

    在使用 dede:channelartlist 自动调用栏目内容时,经常会遇到某些栏目不需要调用,比如“关于我们”.“联系地址”等无持续更新的栏目.要想在 dede:channelartlist 调用 ...

  9. shiro系列五、shiro密码MD5加密

    Shiro-密码的MD5加密   1.密码的加密 在数据表中存的密码不应该是123456,而应该是123456加密之后的字符串,而且还要求这个加密算法是不可逆的,即由加密后的字符串不能反推回来原来的密 ...

  10. selenium模拟H5触摸滑动之-TouchAction

    最近做移动端H5页面的自动化测试时候,需要模拟一些上拉,下滑的操作,最初考虑使用使用selenium ActionChains来模拟操作,但是ActionChains 只是针对PC端程序鼠标模拟的一系 ...