关于javascript: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 中的例子来解释定时器的工作原理，该图为一个简略版的原理图。![Timers](https://upload-images.jianshu.io/upload_images/23129380-04ce157c5b931cdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

上图中，左侧数字代表工夫，单位毫秒；左侧文字代表某一个操作实现后，浏览器去询问以后队列中存在哪些正在期待执行的操作；蓝色方块示意正在执行的代码块；右侧文字代表在代码运行过程中，呈现哪些异步事件。该图大抵流程如下：*   程序开始时，有一个 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 函数、定义变量、箭头函数的形式来解决

关于javascript:JS-定时器的4种写法及介绍

一、什么是定时器

二、举个栗子