js中的定时器

                       

在js中，大家对定时器一定不陌生，像轮播图、倒计时、延时去执行某一段代码等这些中都用到过定时器，也解决了一些大家的问题。下面来简单介绍一下setTiemout、setInterval 、setImmediate、requestAnimationFrame。

定时器：用于在特定的时间执行特定的代码块

前2者，大家相对比较熟悉，setTiemout（超时调用，只执行一次） setInterval（间隔调用，如果不做处理会一直执行） 。两者的相同点：第一个参数为函数，第二个为时间数

举个简单的例子：

很好的验证了上面说的话   我们看到例子中setInterval执行了73次，如果定时器没清除会使其一直运行，一方面会影响你所写的项目，另一方面会影响脚本的运行效率，好多影响不是我们用肉眼能看到的，定时器一般需要在正确条件下触发，不满足条件需要清除，下面我们清除定时器：

其实很简单，clearInterval(setIntervalId); 

setIntervalId = setInterval（fn,1000）;这样就能停止了！

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

requestAnimationFrame: 专门为实现高性能的帧动画而设计的API，但是不能指定延迟时间，而是根据浏览器的刷新频率而定（帧）

后面这2个不常用，简单了解一下就OK啦

之前在博客里看到过有关于定时器的文章，描述的也比较清楚   下面这张图是定时器的工作原理图

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

程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval

第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调

当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行

在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调

后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行