JavaScript四种定时器

setTimeout VS setInterval

setTimeout: 设置一个定时器，在定时器到期后执行一次函数或代码段。
setTimeout() 只执行 code 一次。
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

// 使用语法
setTimeout(code,millisec)
setInterval(code,millisec[,"lang"])

清除定时器：

// 使用定时器
var timer1 = window.setTimeout(function(){},1000)
var timer2 = window.setInterval(function(){},1000)
// JS中定时器是有返回值的，返回值是一个数字，代表当前是第几个定时器，
// 定时器设置时长最短为4ms，不足4ms按照4ms计算
// 清除定时器
window.clearTimeout(timer1)
window.clearInterval(timer2)

两种清除方法都可以清除通过setTimeout和setInterval设置的定时器并且参数不仅可以是timer，还可以是其返回值，例如：1，2。需要注意的是定时器即使清除，返回值也不会被清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排，这点类似于银行的排队领号，即使1号的业务办理完了，后面的人仍是从2号开始继续领号，而不是重新从1号开始。
两种方法在设置定时器时有区别，在清除定时器的时候没有区别
使用时的区别：

1. setTimeout只有在回调完成之后才会去调用下一次定时器，而setInterval则不管回调函数的执行情况，当到达规定时间就会在事件队列中插入一个执行回调的事件，
2. setTimeout执行一次，setInterval周期执行

setImmediate

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

// 使用语法
var immediateID = setImmediate(func, [param1, param2, ...]);
var immediateID = setImmediate(func);
// 清除定时器
window.clearImmediate(immediateID)

immediateID 是这次setImmediate方法设置的唯一ID,可以作为 window.clearImmediate 的参数.
func 是将要执行的回调函数
setTimeout(func, 0) 和 setImmediate(func)谁更快？ setTimeout

requestAnimationFrame

// 使用语法
window.requestAnimationFrame(callback);
// 取消回调
window.cancelAnimationFrame()

requestAnimationFrame VS setTimeout

这两个一般在制作动画中会比较，利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。
这种现象的产生有两个原因：

1. setTimeout的执行时间并不是确定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
2. 刷新频率受屏幕分辨率和屏幕尺寸的影响，因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
除此之外，requestAnimationFrame还有以下两个优势：

1. CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，因此跟着系统步伐走的requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
2. 函数节流：在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个刷新间隔内函数执行多次时没有意义的，因为显示器每16.7ms刷新一次，多次绘制并不会在屏幕上体现出来。

参看文档：http://caibaojian.com/javascript-timer.html
https://blog.csdn.net/vhwfr2u02q/article/details/79492303