js用setTimeout模拟setInterval的好处_优点

前言

setTimeout表示只执行一次,setTimeout通过递归可以模拟setInterval,并且有很多setInterval不具备的好处,下面会详细讲解

setInterval表示间隔一段时间就执行一次

setTimeout

模拟setInterval代码分析:第一次执行diHander后,间隔1s会第一次将diHandler放到事件队列中,当事件队列执行到该处,时间隔1s会第二次将diHander放到时间队列中.以此类推确保每次将diHandler放到事件队列中的事件和上一次事件执行时间之间的间隔始终一致(优点一);同时每次diHandler都会被执行(优点二)

function diHandler(){
     doSomething();
     setTimeout(diHandler,1000)
}
diHandler()

setInterval

setInterval每隔一段时间就将内部定义的事件添加到事件队列中,如果setInterval内的事件执行时间较长,比如内部事件执行2s,每间隔1s就要向事件队列中添加一次事件,如下,要知道浏览器为了防止连续执行setInterval,设置了一个机制:如果当前事件队列中存在未执行的setInterval内部事件,那么就不会向事件队列中再次添加setInterval内部事件.这导致一个问题,doSomething事件某些时候会被跳过,也就是我们希望他执行10次,但实际可能只执行8次.并且下面代码的事件执行间隔明显是不确定的.

setInterval(function(){
    doSomething()//执行时间2s
},1000)