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函数、定义变量、箭头函数的形式来解决