*** 提供了一些原生方式来实现延时去执行某一段代码，下面来简朴先容一下setTiemout、setInterval、setImmediate、requestAnimationFrame。

一、什么是定时器

*** 提供了一些原生方式来实现延时去执行某一段代码，下面来简朴先容一下。

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: 回调

上面简朴的先容了四种 *** 的定时器，而本文将会主要先容对照常用的两种：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. *** 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();