用闭包解决 js 循环中函数变量暂存问题
需求：有一个数组，根据数组的值渲染对应的数字div,单击对应的div 在控制台打印对应的数字。如点击1，控制台打印1.
问题： 不管点击哪个值 打出来都是4
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testFor</title>
</head>
<body>
<div id="container">
</div>
<script>
var arr=[1,2,3,4];
function clickNum(i) {
console.log(i)
}
for(var i of arr){
var iDiv=document.createElement('div');
iDiv.addEventListener('click',function () {
clickNum(i)
});
iDiv.innerText=i;
var container=document.getElementById('container');
container.appendChild(iDiv);
}
</script>
</body>
</html>
期望点击会打印出对应的数字，实际打出来的都是4
原因：
js函数在声明时，浏览器不会去查看函数内部逻辑。只有函数被使用时 才关心函数内部的变量引用。
如本例，只有在单击的时候 才会去触发clickNum函数，而此时循环已执行完毕，i已经变成了4。 所以不管哪个div的click 事件打印出来永远都是4。
解决思路：
1.因为我们需要用到即时的索引值i.所以 我们需要立即触发此函数。这里需要用到匿名函数。
2.有了匿名函数立即执行后，我们还需要将匿名函数中的变量暂存起来，留着点击的时候用，这里需要创建一个闭包。因为闭包的本质就是让内部的变量在函数执行完后也不被垃圾回收调。而是暂存起来。所以，如果需要在函数外部拿到函数内部的变量。或者想在将来拿到现在的变量 都只能通过闭包（我个人理解是这样的）
改后的代码
for(var i of arr){
var iDiv=document.createElement('div');
iDiv.addEventListener('click',function (icopy) {
return function () {
clickNum(icopy)
}
}(i));
iDiv.innerText=i;
var container=document.getElementById('container');
container.appendChild(iDiv);
}
用闭包解决 js 循环中函数变量暂存问题的更多相关文章
- JS循环中使用bind函数的参数传递问题
JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...
- Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题
转: Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题 在实际PL/SQL编程中,我们要对动态取出来的一组数据,进行For循环处理,其基本程序逻辑为: ...
- js for 循环中的 变量问题。
今日处理项目中的一个循环,本来就是一个小小的for循环,后来发现该段程序出现了问题,仔细检查代码没有发现其中的错误.无奈只好叫来了老大帮忙.通过在模版中断点调试(该方式只能自己写debugger断点) ...
- 百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：
原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...
- 输出JS代码中的变量内容
一. 输出JS代码中的变量内容 1. 可以直接以提示框的形式输出 alert("输出的内容"); 2. 可以输出到网页的某个位置 a. 在显示输出的位置放一个标签 <a id ...
- Handlebars.js循环中索引(@index)使用技巧(访问父级索引)
使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...
- 使用javax.script包实现Java设置JS脚本中的变量
下面例子中,我们通过javax.script包ScriptEngine.put()方法设置JS脚本中的变量,JS把所有在线用户输出. package ajava.code.javase; import ...
- 【SQL】小心在循环中声明变量——浅析SQL变量作用域
本文适用:T-SQL(SQL Server) 先看这个语句: --跑3圈 BEGIN --每圈都定义一个表变量,并插入一行 DECLARE @t TABLE(Col INT PRIMARY KEY) ...
- 彻底弄懂js循环中的闭包问题
来源:http://www.108js.com/article/article1/10177.html?id=899 第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然 ...
随机推荐
- TCGA癌症缩写、癌症中英文对照
Cohort 英文名称 中文名称 ACC Adrenocortical carcinoma 肾上腺皮质癌 BLCA Bladder Urothelial Carcinoma 膀胱尿路上皮癌 BRCA ...
- df认识
import pandas as pd #自己创建一个df df = pd.DataFrame({ ,,], 'col2':["zs",'li','zl'], 'col3':[3. ...
- 小Q的棋盘 (贪心)
小Q的棋盘 (贪心) 题目 洛谷传送门 做法 显然这是一棵树(这个就不多bb了,树的性质) 很容易发现一个性质,如果一条链走完,我们必须回头再走一次那条链(或一部分)才可以走到更多的点 所以为了减少这 ...
- Codeforces Round #535 (Div. 3) F
F. MST Unification 题目传送门 题意: 给你n个顶点,m条边:保证没有重边,其中存在多个MST(最小生成树), 你可以修改一些边的权值,让其中有且仅有一个最小生成树,求最少操作的边数 ...
- 攻防世界--getit
测试文件:https://adworld.xctf.org.cn/media/task/attachments/8ef2f7ef55c240418f84b3c514a7a28a 准备 得知 64位文件 ...
- 各种设备在linux中的文件名
各种设备在linux中的文件名: 设备 设备在linux内的文件名 ide硬盘 /dev/ha[a-d] scs硬盘 /dev/sd[a-p] u盘 /dev/sd[a-p](与SAT ...
- markdown语法规则
标题 标题是每篇文章最常用的格式,在markdown中如果要定义标题的话,只要在这段文字之前加#号就可以了. # 一级标题 ## 二级标题 ### 三级标题 以此类推,总共六级标题,建议在#号之后加上 ...
- Linux下svn回滚
方法1: 用svn merge 1) 先 svn up,保证更新到最新的版本,如20: 2) 然后用 svn log ,查看历史修改,找出要恢复的版本,如10 .如果想要更详细的了解情况,可以使用sv ...
- ipv6地址在URL中的表达方式，如何在URL地址中包含ipv6地址
摘要 本文档定义了在WWW浏览器的URL中执行的文本IPv6地址的格式.在包括Microsoft的IE,Mozilla和Lynx等几个已经被广泛安装使用的浏览器的IPv6版本中,这种格式已经被使用.并 ...
- C Primer Plus 学习 第四章
字符串与格式化输入/输出 函数 strlen() 关键字 const 利用#define 和 const创建符号常量 #include <stdio.h> #include <str ...