JS 定时器的4种写法及介绍
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种写法及介绍的更多相关文章
- JS面向对象的几种写法
JS 中,面向对象有几种写法.归纳下,大概有下面这几种:工厂模式,构造函数模式,原型模式,构造函数与原型模式的混合使用,原型链继承,借用构造函数继承. 一.工厂模式 function person ( ...
- [JS] 面向对象的5种写法和拓展JS对象的写法
面向对象的JAVA 最开始当然是对象的定义了 收集了以下的五种写法 //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; C ...
- js面向对象的五种写法
第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = functio ...
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js类的几种写法
我们常用的有以下几种方法来用JavaScript写一个“类”: 1. 构造函数(public属性和方法) 1: function Person(iName, iAge){ 2: this.name=i ...
- js和jquery 两种写法 鼠标经过图片切换背景效果
这个是javascript的写法 <img src="res/img/shop-c_32.jpg" alt="" onmouseover="th ...
- js对象的两种写法
<script> //定义一个对象,提供对应的方法或者属性 var s = { sd1: function () { }, sd2: fun ...
- JS冒泡排序的6种写法(武当雄风)
天下英雄出我辈,一入江湖岁月催.鸿图霸业谈笑间,不胜人生一场醉. 武当山上,一年一度的试道大会又开始了... 众武当弟子摩拳擦掌都想在此次试道大会上一展风采... 张三丰临终前曾留下一句话:试道大会采 ...
- jquery 在页面中三种写法
jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6.7.8浏览器,这样做的目的是为了兼容移动端开发.由于减少了一些代码,使得该版本比 jQuery 1.x ...
随机推荐
- 关于下载gitbash客户端
gitbash的安装包找不到了,最近又在准备新机器的环境,需要安装git客户端. https://www.git-scm.com/,网址找到了,但是下载非常缓慢.搜了一下,都是改host,但是改了也没 ...
- 动画 jquery-transit
<script type="text/javascript" src="js/jquery.min.js"></script> < ...
- MySQL 启动、登录、退出和目录结构
一.启动 MySQL 服务器启动方式有两种: (1)通过服务的方式自动启动 (2)手动启动的方式 1.windows 服务方式启动 操作步骤: 也可以在 cmd 窗口 输入 services.msc ...
- 【日语】【ZZ】日语人称小结
[ZZ]日语人称小结 日语中有关人称的词很多,也有不少朋友问 现整理了一下,希望能对那些不太清楚的朋友有点帮助 如果您认为在下有写错的地方,或者您有什么高见,请不吝赐教 第一人称 “我” 1.私 わた ...
- 小数据玩转Pyspark(2)
一.客户画像 客户画像应用:精准营销(精准预测.个性化推荐.联合营销):风险管控(高风险用户识别.异常用户识别.高可疑交易识别):运营优化(快速决策.产品组合优化.舆情分析.服务升级):业务创新(批量 ...
- coco creator编辑动画坑之拖图片
如图所示,批量选中多张图片之后,拖到右下角的框中,发现有时候可以有时候不行.这个我觉得是个软件的bug 后来经过测试发现只有在粉红色圈的高度才可以正确放入图片,否则都放不了.
- stm32 视频小车
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 ...
- 织梦dede:channelartlist调用排除指定typeid栏目
在使用 dede:channelartlist 自动调用栏目内容时,经常会遇到某些栏目不需要调用,比如“关于我们”.“联系地址”等无持续更新的栏目.要想在 dede:channelartlist 调用 ...
- shiro系列五、shiro密码MD5加密
Shiro-密码的MD5加密 1.密码的加密 在数据表中存的密码不应该是123456,而应该是123456加密之后的字符串,而且还要求这个加密算法是不可逆的,即由加密后的字符串不能反推回来原来的密 ...
- selenium模拟H5触摸滑动之-TouchAction
最近做移动端H5页面的自动化测试时候,需要模拟一些上拉,下滑的操作,最初考虑使用使用selenium ActionChains来模拟操作,但是ActionChains 只是针对PC端程序鼠标模拟的一系 ...