10-02:用 setTimeout 来实现 setInterv
2022-05-15 本文已影响0人
小小前端搬运工
(1)用 setTimeout()方法来模拟 setInterval()与 setInterval()之间的什么区别?
首先来看 setInterval 的缺陷,使用 setInterval()创建的定时器确保了定时器代码规则地插入队列中。这个问题在于:如果定时器代码在代码再次添加到队列之前还没完成执行,结果就会导致定时器代码连续运行好几次。而之间没有间隔。不过幸运的是:javascript引擎足够聪明,能够避免这个问题。当且仅当没有该定时器的如何代码实例时,才会将定时器代码添加到队列中。这确保了定时器代码加入队列中最小的时间间隔为指定时间。
这种重复定时器的规则有两个问题:
1.某些间隔会被跳过
2.多个定时器的代码执行时间可能会比预期小。
下面举例子说明:
假设,某个 onclick 事件处理程序使用啦 setInterval()来设置了一个 200ms 的重复定时器。
如果事件处理程序花了 300ms 多一点的时间完成。
<img width="626" alt="2018-07-10 11 36 43" src="[https://user-images.githubusercontent.co](https://user-images.githubusercontent.co)
m/17233651/42487876-92656f2c-8435-11e8-8a5f-0a97918039da.png">
这个例子中的第一个定时器是在 205ms 处添加到队列中,但是要过 300ms 才能执行。在 405ms 又添加了一个副本。在一个间隔,605ms 处,第一个定时器代码还在执行中,而且队列中已经有了一个定时器实例,结果是 605ms 的定时器代码不会添加到队列中。结果是在 5ms 处添加的定时器代码执行结束后,405 处的代码立即执行。
function say(){
//something
setTimeout(say,200);
}
setTimeout(say,200)
或者
setTimeout(function(){
//do something
setTimeout(arguments.callee,200);
},200);