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

最新推荐文章于 2023-06-21 10:44:46 发布
最新推荐文章于 2023-06-21 10:44:46 发布
阅读量643 收藏 1
点赞数
分类专栏： js面试题 文章标签： javascript 前端 setTimeout setInterval 定时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47450807/article/details/123384053
版权

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

setInterval(fn(), N);

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


                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  卖菜的小白
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
【前端怪谈】为什么要用setTimeout模拟setInterval

				
			

			

				

					hhhhhhhssss的博客
				

				

					08-04
					
					2049
					
				

			

		

		

			
				
文章目录前言一、setInterval存在的问题1.问题复现2.问题分析二、setInterval缺点及setTimeout1.setInterval缺点2.为什么setTimeout能取代setTimeout实现setInterval总结


前言
大家都知道，setTimeout是延迟执行函数，而setInterval就像一个定时器，每间隔一定时间就触发一次回调。
今日面试中，面试官问了我一个问题，为什么要用setTimeout去实现setInterval呢？

再一次被自己菜哭，面试完成后，赶紧去查了

			
		

	



                

              
                



	

		

			

				
					
为什么要用 setTimeout 模拟 setInterval ？

				
			

			

				

					HZ___ZH的博客
				

				

					03-16
					
					696
					
				

			

		

		

			
				
setInterval
在JS 事件循环之宏任务和微任务中讲到过，setInterval 是一个宏任务。用多了你就会发现它并不是准确无误。

推入任务队列后的时间不准确：在 setInterval 被推入任务队列时，如果在它前面有很多任务或者某个任务等待时间较长比如网络请求等，那么这个定时器的执行时间和我们预定它执行的时间可能并不一致。
函数操作耗时过长导致的不准确：考虑极端情况，假如定时器里面的代码需要进行大量的计算(耗费时间较长)，或者是 DOM 操作。这样一来，花的时间就比较长，有可能前一次代码还没有

			
		

	



                


  
              

                


	

		

			

				
					
js中setTimeout的妙用–防止循环超时

				
			

			

				

					12-12
				

			

		

		

			
				
上个周日，介绍了如何使用setTimeout代替setInterval进行间歇调用，这个周日，继续来讲《JavaScript高级程序设计》这本书里面，对于setTimeout的另一种妙用——防止循环超时
 【这是铺垫，为故事的高潮埋下伏笔】
JS是单线程的，一个代码块里面的代码，只能按顺序从上到下执行，所以如果中间有一块代码，执行起来非常耗时，就会导致下面的代码无法执行，出现浏览器假死的状态。
JS的耗时操作，常见的有两种  1.向服务器发起请求   2.对数组的循环操作  （当然，还有一种，就是把1和2合在一起，叫做  在循环操作里面向服务器发出请求，哈哈哈，实际项目里面经常有人这么干）
解

			
		

	





	

		

			

				
					
setTimeout与setInterval的坑以及优缺点

				
			

			

				

					fighting_DW
				

				

					11-15
					
					726
					
				

			

		

		

			
				
setTimeout代替setInterval

			
		

	



		

			
		



	

		

			

				
					
为什么使用 setTimeout 实现 setInterval？怎么模拟？

				
			

			

				

					weixin_45740510的博客
				

				

					02-19
					
					799
					
				

			

		

		

			
				
Why?
setInterval 的作用是每隔一段指定时间执行一个函数，但是执行不是真的到了时间立即执行，它真正的作用是每隔一段时间将事件加入事件队列中去，只有当 当前的执行栈为空的时候，才能去从事件队列中取出事件执行。所以可能会出现这样的情况，就是当前执行栈执行的时间很长，导致事件队列中累积了多个定时器加入的事件，当执行栈结束的时候，这些事件会依次执行，因此就不能到间隔一段时间执行的效果。
针对 setInterval 的这个缺点，我们可以使用 setTimeout 递归调用来模拟 setInterval

			
		

	





	

		

			

				
					
js中利用settimout 模拟实现 setinterval并且有去除定时器

					
最新发布

				
			

			

				

					前端小白
				

				

					06-21
					
					355
					
				

			

		

		

			
				
settimout 模拟实现 setinterval （带去除定时器的版本）

			
		

	





	

		

			

				
					
js代码-settimeout 模拟实现 setinterval(带清除定时器的版本)

				
			

			

				

					07-14
				

			

		

		

			
				
### setTimeout模拟setInterval  1. **setTimeout基础**  `setTimeout`接收两个参数：一个函数和一个时间（毫秒），在指定的时间间隔后执行该函数一次。例如：  ```javascript  setTimeout(function() {  console....

			
		

	





	

		

			

				
					
Vue中使用 setTimeout() setInterval()函数的问题

				
			

			

				

					10-18
				

			

		

		

			
				
总结来说，使用`setTimeout`和`setInterval`在Vue中需要特别注意`this`的指向问题，以及确保通过Vue实例直接或间接修改数据以触发响应式更新。同时，可以考虑使用`Vue.nextTick`来确保在DOM更新后执行后续操作，这在...

			
		

	





	

		

			

				
					
setTimeout和setInterval的区别你真的了解吗?

				
			

			

				

					09-05
				

			

		

		

			
				
为了避免`setInterval`的这种问题，可以使用递归的`setTimeout`来模拟间隔执行：  ```javascript setTimeout(function() {  // processing  setTimeout(arguments.callee, interval); }, interval); ```  这种方式...

			
		

	





	

		

			

				
					
javascript setTimeout和setInterval 的区别

				
			

			

				

					10-29
				

			

		

		

			
				
JavaScript中的`setTimeout`和`setInterval`是两个重要的定时器函数，它们都属于全局`window`对象的方法，常用于在指定的时间后执行某段代码或周期性地重复执行某段代码。然而，它们的工作机制和用途有所不同。  1. ...

			
		

	





	

		

			

				
					
为什么要用setTimeout来模拟setInterval

				
			

			

				

					weixin_43840538的博客
				

				

					06-09
					
					629
					
				

			

		

		

			
				
setTimeout(fn,time)： 等待time时间后执行fn
setInterval(fn,time) 每隔time时间执行fn
我们希望setInterval是每隔一段时间自动执行，但是实际应用中，setInterval并不会按照我们预想的那样，它通常存在如下两个缺点。

在执行的时候可能会跳过指定时间间隔
多个定时器函数会立刻执行

我们就实际场景来说一下这两个缺陷
时间间隔
首先明确一个概念，定时器的时间间隔指的是什么？
它不是指函数的执行时间，而是函数被推入到消息队列的时间。
也就是说每隔t

			
		

	





	

		

			

				
					
setInterval的弊端和解决方案

					
热门推荐

				
			

			

				

					runOnWay的博客
				

				

					07-03
					
					2万+
					
				

			

		

		

			
				
在需要重复发送请求或者某些效果的时候，一般都会想到使用setInterval，但是它的一些弊端，会给程序带来很大的隐患

一、弊端 
1.setInterval对自己调用的代码是否报错漠不关心。即使调用的代码报错了，它依然会持续的调用下去 
2.setInterval无视网络延迟。在使用ajax轮询服务器是否有新数据时，必定会有一些人会使用setInterval，然而无论网络状况如何，它都会去一遍...

			
		

	





	

		

			

				
					
为什么使用setTimeout模拟setInterval

				
			

			

				

					叹之
				

				

					03-13
					
					312
					
				

			

		

		

			
				
setInterval的缺点


“丢帧”现象：setInterval()仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中，即在向队列插入代码实例之前，会先检测是否正在执行该代码实例，以及队列中是否已经存在该代码实例，只要存在其一就都不会再向队列中插入。


实际代码执行间隔 <= 设定的时间间隔：比如一个1000ms的interval，在插入队列后因为前一个任务执行超时（假设超时800ms），导致该任务不能及时执行，当它执行完毕后（假设执行不耗时，即还剩下200ms），下一个代码（相

			
		

	





	

		

			

				
					
JS新玩法：使用setTimeout()来模拟周期可变的setInterval()

				
			

			

				

					double_sweet1的博客
				

				

					03-28
					
					969
					
				

			

		

		

			
				
问题描述：

使用setTimeout动态的修改setInterval的周期依次为a,a+b,a+2b,a+3b,...,a+nb。并在指定时间后停止这个周期函数。



问题关键点：

（1）动态的修改setInterval的周期

（2）在指定时间后停止这个周期函数



问题实现思路：

针对第一个点，动态的修改setInterval的周期，直接在原始的interval上修改是不会生效的，也就是下面这种写法：


let count = 0;
setInterval(() => {
    co

			
		

	





	

		

			

				
					
重复定时器，为什么要用setTimeout()模拟setInterval()

				
			

			

				

					远方
				

				

					11-21
					
					1672
					
				

			

		

		

			
				
使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。问题在于定时器代码可能在代码再次被执行到队列之前还没有完成执行，结果导致定时器代码连续运行了好几次而没有任何停顿。这种重复定时器可能导致两个问题：
（1）某些间隔被跳过；
（2）多个定时器的代码执行之间的间隔可能会比预期的小。
使用setTimeout()来模拟setInerval()
setTimeout(functio...

			
		

	





	

		

			

				
					
JS--利用setTimeout模拟setInterval

				
			

			

				

					Fancy_vae的博客
				

				

					09-20
					
					751
					
				

			

		

		

			
				
setTimeout(fn, time)，超时调用，在时间大于等于 time  时调用；
setInterval(fn, time)，是间歇调用，每隔 time 调用一次。从载入后,每隔指定的时间就执行一次表达式，只要窗口不关闭或 clearInterval() 调用就会无限循环下去
虽然两者不一样，但是却可以相互模拟。具体使用那个，以具体的需求和场景具体分析，就像for循环可以模拟所有的循环一样(包括分支，以及do while一样)。一般情况下 setTimeout() 用于延迟执行某方法或功能；setI

			
		

	





	

		

			

				
					
javascript两种方式实现自定义setInterval

				
			

			

				

					u014050961的博客
				

				

					05-27
					
					882
					
				

			

		

		

			
				
两种方式实现setInterval（setTimeout和requestAnimationFrame）引言使用setTimeout方式实现setTimeout实现方式的缺点和改进使用requestAnimationFrame方式实现进一步改进结语
引言
最近在学习基础js时，突然想起了之前关于setInterval的问题，再有些时候并不可靠，所以有推荐使用setTimeout来实现setInterval，所以也想自己实现一个，关于setInterval的问题这里就不多讨论，已经有很多文章再说了，这里主要介绍

			
		

	





	

		

			

				
					
使用 setTimeout 代替 setInterval

				
			

			

				

					半夏_2021的博客
				

				

					07-12
					
					1078
					
				

			

		

		

			
				
使用 setTimeout 代替 setInterval

			
		

	





	

		

			

				
					
javascript总结：setTimeout模拟setInterval

				
			

			

				

					张培跃的个人博客
				

				

					08-14
					
					679
					
				

			

		

		

			
				
setTimeout和setInterval的语法相同。它们都有两个参数，一个是将要执行的代码字符串，还有一个是以毫秒为单位的时间间隔。

setInterval(()=>{}, 1000);
setTimeout(()=>{}, 1000);


区别：setInterval在执行完一次代码之后，经过指定的时间间隔，执行代码，而setTimeout只执行一次那段代码。
注意：假设s...

			
		

	





	

		

			

				
					
如何使用settimeout模拟setinterval效果

				
			

			

				

					04-11
				

			

		

		

			
				
settimeout和setinterval都是JavaScript中的定时器函数，用于延迟或重复执行代码。

settimeout函数会在指定的延迟时间之后执行一次代码。参数包括要执行的代码、延迟时间（以毫秒为单位）和可选的参数。例如，以下代码将在3000毫秒后打印一条消息：

setTimeout(function() {
  console.log('3秒钟已经过去了！');
}, 3000);

setinterval函数会每隔一定时间重复执行一次代码。参数包括要执行的代码、时间间隔（以毫秒为单位）和可选的参数。例如，以下代码每隔一秒钟将打印一条消息：

var counter = 0;
setInterval(function() {
  console.log('已经过去了' + ++counter + '秒钟！');
}, 1000);

依据具体情况，我们可以选择使用这两个函数中的一个，或者两个一起使用。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值