在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的回调,以后每隔指定的延迟时间之后都会向队列中插入一个回调
后面浏览器将在执行完当前队头的代码之后,将再次取出目前队头的事件来执行