js的定时器有哪些（定时器的4种写法及介绍）

js提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下settiemout、setinterval、setimmediate、requestanimationframe。

一、什么是定时器

js提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下 settimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段

var timeoutid = window.settimeout(func[, delay, param1, param2, ...]);
var timeoutid = window.settimeout(code[, delay]);

timeoutid: 定时器idfunc: 延迟后执行的函数code: 延迟后执行的代码字符串，不推荐使用原理类似eval()delay: 延迟的时间（单位：毫秒），默认值为0param1,param2: 向延迟函数传递而外的参数，ie9以上支持

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

var intervalid = window.setinterval(func, delay[, param1, param2, ...]);
var intervalid = window.setinterval(code, delay);

intervalid: 重复操作的idfunc: 延迟调用的函数code: 代码段delay: 延迟时间，没有默认值

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

var immediateid = setimmediate(func[, param1, param2, ...]);
var immediateid = setimmediate(func);

immediateid: 定时器idfunc: 回调

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

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

• 程序开始时，有一个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函数、定义变量、箭头函数的方式来解决