定时器的4种写法及介绍 js的定时器有哪些_生活百科

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中的例子来解释定时器的工作原理，该图为一个简单版的原理图。