当闭包遇上setTimeout

最新推荐文章于 2021-09-03 15:14:34 发布
最新推荐文章于 2021-09-03 15:14:34 发布
阅读量1k 收藏 5
点赞数
分类专栏： 前端学习小积累 文章标签： 闭包 setTimeout js执行机制 EventLoop
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kk211814/article/details/88343430
版权

代码已经过测试。

知识点一：js的事件循环Event Loop

js是单线程执行的。js的执行机制把任务分为两类：同步任务、异步任务。

同步任务先执行，执行过程中遇到异步任务，就将其放入任务队列当中，继续执行同步任务。同步任务执行完之后，再去检查任务队列中要处理的异步任务。

具体的关于Event Loop的内容参考文章：并发模型与事件循环

知识点二： setTimeout

函数setTimeout接受两个参数：待加入队列的消息和一个延迟（可选，默认为 0）。这个延迟代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其它消息，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。

接下来开始看具体题目

测试1： 


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  小希kk
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
setTimeout与闭包

				
			

			

				

					chuxianran8115的博客
				

				

					03-14
					
					478
					
				

			

		

		

			
				
一、关于 setTimeout 
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 
比如在1秒后打印出字母"a"： 
setTimeout('console.log("a")', 1000); 
执行效果图： 
 
我们看到执行setTimeout后，出现了一个数字 ...

			
		

	



                

              
                



	

		

			

				
					
setTimeout与循环闭包

				
			

			

				

					izwell的博客
				

				

					09-20
					
					509
					
				

			

		

		

			
				
文章目录情景事件机制1.  单线程2. 任务类型3. 任务执行流程闭包1. 闭包的定义2. 实列中的闭包解决方案1. 使用es6的let2. 使用立即执行函数3. 使用setTimeout的第三个参数总结
情景

今天在复习JS的闭包相关的知识时，看到有一篇文章中讲到了setTimeout/setInterval的闭包，不禁勾起我之前对这个问题的一系列想法，下面针对这个问题进行详细的讲解。以set...

			
		

	



                


  
              

                


	

		

			

				
					
JS-闭包

				
			

			

				

					伏城之外的博客
				

				

					09-03
					
					477
					
				

			

		

		

			
				
如何产生闭包


内层函数访问外层函数的成员（变量或函数），就产生了闭包









			
		

	





	

		

			

				
					
详解setTimeout()

					
热门推荐

				
			

			

				

					Moments
				

				

					01-30
					
					3万+
					
				

			

		

		

			
				
前言：看了这篇文章，1.注意setTimeout引用的是全部变量还是局部变量了，当直接调用外部函数方法时，实际上函数内部的变量已经变成全局。2.提醒我防止出错的，用匿名函数不容易出错。3.setTimeout最快执行时间是4毫秒。4.使用setTimeout的函数会比当前队列的函数慢执行，在他们的后面。5.setTimeout中的定时器并不是准确的时间，实际中它需要在执行完前面的函数后才定时执行。 你还可以查阅关于setTimeout的相关介绍 JavaScript提供定时执行代码的功能，叫做定时器（tim

			
		

	



		

			
		



	

		

			

				
					
setTimeout中的闭包

				
			

			

				

					Honeymao的博客
				

				

					03-01
					
					1007
					
				

			

		

		

			
				
我们直接举栗子说问题。for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000 * i);
}结果：开始输出一个 5，然后每隔一秒再输出一个 5，一共 5 个 5。 
因为setTimeout会在和他同时执行的代码执行完成之后，再按照时间执行花括号里面的内容。也就是说，除了console

			
		

	





	

		

			

				
					
使用闭包对setTimeout进行简单封装避免出错

				
			

			

				

					09-05
				

			

		

		

			
				
写js脚本时经常会用到一些拼写函数的情况，例如调用setTimeout...查了很长时间，为什么就是弹不出对话框呢，使用闭包就可完全避免了

			
		

	





	

		

			

				
					
JavaScript setTimeout使用闭包功能实现定时打印数值

				
			

			

				

					10-23
				

			

		

		

			
				
主要介绍了JavaScript setTimeout使用闭包功能实现定时打印数值 的相关资料,需要的朋友可以参考下

			
		

	





	

		

			

				
					
Javascript的setTimeout()使用闭包特性时需要注意的问题

				
			

			

				

					10-25
				

			

		

		

			
				
主要介绍了Javascript的setTimeout(0)使用闭包特性时需要注意的问题,需要的朋友可以参考下

			
		

	





	

		

			

				
					
setTimeOut和闭包

				
			

			

				

					dianwangsa3895的博客
				

				

					03-05
					
					232
					
				

			

		

		

			
				
掘金上看到一个setTimeout与循环闭包的思考题。拿过来看了下，一方面了解settimeout的运行机制，还有就是js闭包的特性。关于闭包，有如下解释：
在这里写一点我对闭包的理解。理解闭包的关键在于：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象。
function outer() {
    var a = 1;
    retu...

			
		

	





	

		

			

				
					
 从 setTimeout 彻底理解闭包

				
			

			

				

					weixin_34409357的博客
				

				

					07-12
					
					299
					
				

			

		

		

			
				
先看一个常见的例子setTimeout 闭包代码
//代码段（1）

for(var i=0;i<5;i++){
    setTimeout(console.log.bind(null,i),i*1000);
}

输出： 打印为每间隔1s依次递增打印i。
疑问： 如果把bind改成call将会是什么效果呢？
 //代码段（2）内...

			
		

	





	

		

			

				
					
Vue中使用定时器setInterval和setTimeout

				
			

			

				

					weixin_30376509的博客
				

				

					11-22
					
					473
					
				

			

		

		

			
				
js中定时器有两种，一个是循环执行setInterval，另一个是定时执行setTimeout

一、循环执行（setInterval）

顾名思义，循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉
用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号,第二个参数为时间间隔

...

			
		

	





	

		

			

				
					
setTimeout使用之由"作用域"引发的血案

				
			

			

				

					Ibex-Relieved的专栏
				

				

					10-13
					
					1201
					
				

			

		

		

			
				
简单描述setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。最近使用它做一个点击频率的控制，遇到一个问题，刨根问底发现罪魁祸首就是作用域的问题。
代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

			
		

	





	

		

			

				
					
在vue中使用setTimeout,离开当前路由setTimeout未销毁的问题

				
			

			

				

					前端打工人的博客
				

				

					04-15
					
					2157
					
				

			

		

		

			
				
问题:从第一个页面跳转到第二个页面后,如果停留在第二个页面，定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时，也会出现重复创建setTimeout的情况。
原因:当我们刷新页面时，会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。
data () {
    return {
      ct: null
    }
}，
...

			
		

	





	

		

			

				
					
当 setTimeout 遇上 for循环

				
			

			

				

					这是个问题
				

				

					11-09
					
					1057
					
				

			

		

		

			
				
在for循环内加入setTimeout

			
		

	





	

		

			

				
					
setTimeout&Promise&Async之间的爱恨情仇

				
			

			

				

					weixin_34061555的博客
				

				

					11-28
					
					105
					
				

			

		

		

			
				
setTimeout
一、setTimeout 初现
定义：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
复制代码
语法：
    setTimeout(code, milliseconds, param1, param2, ...)
    setTimeout(function, milliseconds, param1, param2, ...)
复制代码


参...

			
		

	





	

		

			

				
					
使用闭包优雅的为setInterval(setTimeout)传递参数

				
			

			

				

					weixin_34007020的博客
				

				

					03-05
					
					139
					
				

			

		

		

			
				
闭包的一个常见用法是在执行函数之前为要执行的函数提供参数。
例如：将函数作为 setInterval 函数的第一个参数，这在 Web 浏览器的环境下是非常常见的一种应用。 
setInterval用于有计划地执行一个函数，要执行的函数是其第一个参数，其第二个参数是以毫秒表示的执行间隔。也就是说，当在一段代码中使用 setInterval时，要将一个函数的引用作为它的第一个参数，而将以毫秒表示的...

			
		

	





	

		

			

				
					
在vue中使用定时器setTimeout、setInterval的心得

				
			

			

				

					fireInNight的博客
				

				

					03-21
					
					6475
					
				

			

		

		

			
				
最近在做一个数据可视化的项目，其中就不得不考虑数据项定时刷新功能了。
所以就在我们的vue项目中使用了定时器。
1、在vue中，有两套定时器，一套是浏览器API，window对象上的；另一套就是vue/nodejs封装的，需要引入
import { setInterval, clearInterval } from 'timers'

建议使用window对象自带的，因为不容易错。
如果一不小心只...

			
		

	





	

		

			

				
					
小记VUE下setTimeOut和setInterval遇到的问题

				
			

			

				

					zcy_csdn123的博客
				

				

					12-01
					
					1万+
					
				

			

		

		

			
				
相信大家对着两个函数都陌生，就是一个定时器，setTimeOut只执行一次，而setInterval会重复执行 
需要注意的是：在setInterval不用的时候一定要用clearSetInterval关闭定时器。说一下最近开发中遇到的问题，我是用vue开发的，顺便记录这个错误。 
我需要轮询接口，所以使用setInterval。// 我是想没2秒执行一次myFunc这个函数。
setInterva

			
		

	





	

		

			

				
					
groovy 闭包上下文传递

					
最新发布

				
			

			

				

					05-30
				

			

		

		

			
				
在Groovy中，闭包可以捕获其定义时所在的上下文，并在运行时使用这些上下文中的变量和方法。当一个闭包被调用时，它的上下文可以通过多种方式传递给它。

一种传递上下文的方式是将其作为闭包的参数传递。例如：

```
def myClosure = { context ->
    println "Hello, ${context.user}!"
}
myClosure([user: 'John'])
```

在这个例子中，我们定义了一个闭包 `myClosure`，它接受一个名为 `context` 的参数，在闭包体中打印出 `context.user` 的值。我们将一个包含 `user` 属性的map作为参数传递给这个闭包。

另一种传递上下文的方式是使用闭包的 `delegate` 属性。例如：

```
def data = [name: 'John', age: 30]
def myClosure = {
    println "Hello, ${name}! You are ${age} years old."
}
myClosure.delegate = data
myClosure()
```

在这个例子中，我们定义了一个闭包 `myClosure`，它引用了 `name` 和 `age` 变量。然后我们将一个包含 `name` 和 `age` 属性的map赋值给闭包的 `delegate` 属性。当我们调用闭包时，它将在 `delegate` 对象上查找 `name` 和 `age` 属性，并将它们的值打印出来。

还有一种传递上下文的方式是使用闭包的 `resolveStrategy` 属性。这个属性可以控制闭包在查找变量和方法时的行为。默认情况下，它是 `Closure.DELEGATE_FIRST`，即先在 `delegate` 对象上查找，如果找不到再在闭包定义时的上下文中查找。例如：

```
def data = [name: 'John', age: 30]
def myClosure = {
    println "Hello, ${name}! You are ${age} years old."
}
myClosure.resolveStrategy = Closure.DELEGATE_FIRST
myClosure.delegate = data
myClosure()
```

在这个例子中，我们将闭包的 `resolveStrategy` 属性设置为 `Closure.DELEGATE_FIRST`，然后将一个包含 `name` 和 `age` 属性的map赋值给闭包的 `delegate` 属性。当我们调用闭包时，它将先在 `delegate` 对象上查找 `name` 和 `age` 属性，如果找不到再在闭包定义时的上下文中查找。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值