【闭包】解决for循环异步事件只响应最后一个事件

最新推荐文章于 2023-06-16 16:07:26 发布
最新推荐文章于 2023-06-16 16:07:26 发布
阅读量400 收藏 2
点赞数 1
分类专栏： 小知识点 文章标签： 前端 闭包 作用域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hggl_bera/article/details/104016515
版权

这是一个关于变量闭包的问题，以前做项目时遇到，那时候并没有想明白，换了另一种方法实现，今天看闭包的知识点时恍然大悟，于是，写出来记录下。

首先，涉及两个概念
变量的作用域：也就是变量的有效范围，函数内部变量的作用域也就只能在函数内部使用。
变量的生存周期：对于函数的局部变量，函数退出后也就失去了价值，他们也会随着函数调用的结束而销毁。

然后，上闭包应用。
假设页面上有5个div节点，我们通过循环来给每个div绑定onclick事件，按照索引顺序，点击第1个div时弹出0，点击第2个div时弹出1，以此类推。如果用常规的绑定就会出现题目中的问题。
原因：div节点的onclick事件是被异步触发的，当事件被触发的时候，for循环早已结束，此时变量i的值已经是5，所以在div的onclick事件函数中顺着作用域链从内到外查找变量i时，查找到的值总是5（注释部分代码可以尝试一下）。
解决办法：在闭包的帮助下，把每次循环的i值都封闭起来。当在事件函数中顺着作用域链中从内到外查找变量i时，会先找到被封闭在闭包环境中的i，如果有5个div，这里的i就分别是0,1,2,3,4：

最后，上代码，结合以上解释。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>闭包</title>
	</head>
	<style type="text/css">
		div {
			width: 100%;
			height: 50px;
			margin: 20px 0;
			border: aqua 1px solid;
			background: #00FFFF;
			cursor: pointer;
			
			display: flex;
			align-items: center;
			justify-content: center;
		}
		div:hover {
			background: chartreuse;
		}
	</style>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
	</body>
	<script type="text/javascript">
		var nodes = document.getElementsByTagName('div');
		/* 未使用闭包前 */
// 		for(var i=0,len=nodes.length; i<len; i++) {
// 			nodes[i].onclick = function() {
// 				alert(i);
// 			}
// 		}
		for(var i=0,len=nodes.length; i<len; i++) {
			(function(i){
				nodes[i].onclick = function() {
					alert(i);
				}
			})(i)
			
		}
	</script>
</html>

门前大桥下www
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js闭包及解决办法:(内存泄漏-异步执行函数)
Iwokei的博客
05-25 1877
一：js闭包及解决办法 闭包在JavaScript高级程序设计（第3版）中是这样描述：闭包是指有权访问另一个函数作用域中的变量的函数。 闭包的作用： 1.访问其他函数内部变量 2.保护变量不被内存回收机制回收 3.避免全局变量被污染 方便调用上下文的局部变量 加强封装性 缺点：闭包会保存函数中的变量在内存中，导致内存消耗大,可能会造成内存泄漏 什么是内存泄漏 首先，需要了解浏览器自身的内存回收机制。 每个浏览器会有自己的一套回收机制，当分配出去的内存不使用的时候便会回收；内存泄露的根本原因就是你的代码中分
for 循环中异步再异步闭包问题
weixin_43062742的博客
10-14 213
需求详情 一个数组，根据数组arr中的id，调接口拿到每一个的name，然后在回调函数中，用对应的id和name去获取更多详情,例如age，height。 第一版实现 for(var i = 0; i < arr.length; i++) { let temp = arr[i]; // 接口请求，假设为this.get this.get1(url1,temp).success(function(res) { if(res.success) { let name = res.name
闭包解决异步问题，ajax/axios...
python_web全栈
02-22 2867
1. 第一种(自执行函数) 1.1 格式 ()() (function(参数1){ })(传递参数1的地方) 1.2 案例 var dataList = ["1111", "222", "33"] for (var i in dataList) { (function(data){ wx.request({ url: 'xxxxx', success: function (res) { console.log(data); } .
函数编程-在循环体和异步回调中慎重使用闭包（closure）
scau_jjb的专栏
12-16 1232
由于闭包具有持久性，生成的闭包不会立即被销毁，因此它会持续占用系统资源。如果大量使用闭包，将会造成系统资源紧张，甚至导致内存溢出等错误。 /* 内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束，由于浏览器垃圾回收方法有bug，会产生内存泄露 */ /** * 把数组类型的参数中每个元素的值分别封装在闭包结构中， * 然后把闭包存储在一个数组中，并返回这个数组。
【转】解决for循环中只能点击到最后一个元素的问题
魂-淡
12-04 1319
有时候我们需要对一排元素进行逐一选中，比如下面一个例子中，我们想要当点击一排按钮中的某一个时，利用下面的写法，都是只能弹出最后一个元素。 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>...
详解ES6之async+await 同步/异步方案
08-29
例如，在for循环中，如果希望前一个异步执行完毕、后一个异步再执行，该怎么办？可以使用async+await来解决这个问题。 async function task() { for (let val of [1, 2, 3, 4]) { let result = await send(val); ...
提高AJAX客户端响应速度
05-10
在提高AJAX客户端响应速度的过程中，有几个关键点需要开发者密切关注，以确保系统的高效运行和优化用户体验。首先，我们要理解AJAX（Asynchronous JavaScript and XML）的核心价值在于它能够实现页面的部分更新，...
Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)
10-21
URL是`/business/findpersons.json`，期望的数据类型设置为`"json"`，这意味着服务器应返回一个JSON格式的响应。当请求成功时，会执行`success`回调函数。 在`success`回调中，`doc`参数包含了服务器返回的JSON数据...
记录vue项目中遇到的一点小问题
10-17
因此，即使在循环内部创建闭包，也并不会解决这个问题，因为每次迭代的闭包都共享了同一个`classesId`引用。 正确的解决办法是使用`Array.prototype.map()`或`Array.prototype.forEach()`方法，而不是简单的for循环...
前端大厂最新面试题-tusimple.docx
06-06
该问题考察了候选人的Promise 使用能力，要求候选人能够实现一个 Promise.all 函数来处理多个异步任务。该问题的解决思路可以使用 Promise.resolve 和 Promise.reject 两个方法来实现。 Game Three 游戏三：给定一...
nodejs学习笔记二：闭包和异步编程
思诚^_^
09-30 2626
闭包到底是什么鬼闭包就是函数��，但是它可以继承并访问它自身被声明的那个作用域里的变量。当你将一个回调函数作为参数传递给另外一个进行i/o操作的函数时，回调函数稍后会被调用，神奇的是，在被调用时，回调函数会记住它自身声明时所在的上下文，并且可以访问该上下文及其父上下文里的所有变量，这个强大的特性就是Node成功的核心。举个简单的jquery例子： (function(){ va
作用域，变量作用域，作用域链知识
Hec990的博客
09-13 255
这里写目录标题作用域作用域是什么？变量作用域全局变量和局部变量的区别是什么？作用域链作用域链是什么？快速查看 作用域 作用域是什么？ 就是某个（变量）在某个范围内起作用和效果，出了这个变量的作用域就不起效果； 作用域主要分为2个，全局作用域和局部作用域； <script> // 1.全局作用域： 整个script标签下 或者是单独的js文件（外部js） // 2.局部作用域也叫（函数作用域）：在函数内部就是局部作用域 这个代码的名字（变量）只在函数内部起作用和效果； // 3.不同作用
（问题：已解决）python tkinter (for) 循环图片/显示所有图片/只显示最后一张图片
最新发布
2302_76686133的博客
06-16 761
【代码】（问题：已解决）python tkinter (for) 循环图片/显示所有图片/只显示最后一张图片。
使用闭包解决for循环及原理
PPPP_X的博客
03-04 927
闭包，原来因为垃圾回收机制的，没有被使用的变量会被回收，而闭包因为占用了某个变量，使原来本应该被回收的变量没有被回收。 下面看一个没有使用闭包的for循环例子，大家应该日常中经常用到： for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i) }, 0) } 这段代码输出的是 五个...
for 循环中使用函数导致的闭包问题解决——两种方式解决
yehaocheng520的博客
06-29 393
for循环中，如果给每个元素都使用函数进行处理的话，很可能出现闭包问题 简单的for循环代码 var arr = [0,1,2,3,4,5]; function fn(){ for(var i = 0;i<arr.length-1;i++){ console.log("索引",i); } } 控制台打印情况如下： for循环中加入setTimeout函数 var arr = [0,1,2,3,4,5]; function fn2(){ for(var i = 0;i<arr.le
for循环里进行异步操作的问题
brilliantSt的博客
03-02 2414
首先，来看下以下代码的执行结果： var arr = [1,2,3,4,5] for(var i= 0;i< arr.length; i++){ setTimeout(function(){ console.log(i) },100) } 很明显，这个循环我们是想得到 0,1,2,3,4 的结果，但是最后会打印出5个5，这是因为JavaScript会将异步任务放在一个队列里面，等所有的同步任务执行完成之后才会执行异步任务。所以在以上代码中遇到异步任务setTimeout后继续执行for循环，
异步引起的for循环问题
Kidd的博客
07-04 1802
// 异步引起的for循环问题 1 for(var i=0;i<5;i++) { setTimeout(function timer(){ console.log(i); },i*1000); } // 异步引起的for循环问题 2 for (var i = 1; i <= 5; i++) { item.onclick = function() { console.log(i); }; } 这两段代码中结果最终只输出5，真的和闭包没有一点关系。真正的原因是当给
android通过遍历处理多个按钮点击事件
weixin_39183543的博客
03-04 2952
如果我们有很多的按钮都有点击事件的话，那么单单靠switch case是很麻烦的，因为你需要在每个case后面加上一个R.id.xx。这样的代码看起来不整洁也很麻烦。那么如果我们使用遍历的方法来处理的话就是方便许多。首先我们先来了解一下获取控件id的方式：1：反射：try{ Field field=R.drawable.class.getField(type); int i= fiel...
来，一起梳理下Android响应点击事件的方法
weixin_30887919的博客
10-13 171
一、设置setOnClickListener 这应该是最原始的方法了吧，来，先上代码： 布局文件： 1 <Button 2 android:id="@+id/button1" 3 android:layout_width="wrap_content" 4 android:layou...
vue3 for循环异步更改一个对象的值，该对象值不变是最后一个
05-27
循环异步操作时要注意闭包问题，可以使用`let`关键字来声明循环变量，避免变量提升的问题。 以下是一个示例代码： ```javascript async function updateObject(obj) { for (let i = 0; i ; i++) { const item = ...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值