为什么要使用setTimeout来模拟setInterval?又该如何模拟?

x33g5p2x  于2022-03-09 转载在 其他  
字(0.8k)|赞(0)|评价(0)|浏览(331)

一、写在前面
刷了一道面试题,问的是setInterval为什么要用setTimeout来模拟呢?,看了别人的一些文章,加上自己的理解,我将其总结一下。
二、setInterval的弊端
如下所示为setInterval执行函数

  1. setInterval(fn(), N);

我们了解js的事件循环机制就明白了,setInterval并不是说当过了时间N之后就会执行fn函数,其实是过了时间N后,fn函数才会被放入事件队列中等待执行。此时下一个定时器就会开启计时,所以如果主线程中的任务需要等待的时间特别长,则就会在事件队列中堆积的fn函数特别多,导致最终这些函数都会一起执行。完全没有定时的效果,这就是setInterval的弊端。
三、使用setTimeout来模拟setInterval
我们看这一个例子:

  1. for (var i = 0; i < 5; i++) {
  2. setTimeout(function() {
  3. console.log(i);
  4. }, 1000);
  5. }

这里的最终结果是:一秒钟之后一次性打印5个5。
为什么?因为for循环是主线程代码,所以在for循环会一次性执行,并且同时创建5个定时器。当1秒之后,定时器会立即执行,一次性打印5个5。
使用setTimeout来模拟setInterval

  1. <script>
  2. function mysetInterval(func, timer) {
  3. let tis = {
  4. flag: true
  5. }
  6. function intival() {
  7. if(tis.flag) {
  8. func()
  9. setTimeout(intival, timer)
  10. }
  11. }
  12. setTimeout(intival, timer)
  13. return tis
  14. }
  15. let s = mysetInterval(() => {
  16. console.log('hhhhh')
  17. }, 1000)
  18. // 5秒钟停止
  19. setTimeout(() => {
  20. s.flag = false
  21. }, 5000)
  22. </script>

相关文章