需求：有一个数组，根据数组的值渲染对应的数字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 循环中函数变量暂存问题的更多相关文章

  1. JS循环中使用bind函数的参数传递问题

    JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...

  2. Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题

    转: Oracle中使用Table()函数解决For循环中不写成 in (l_idlist)形式的问题 在实际PL/SQL编程中,我们要对动态取出来的一组数据,进行For循环处理,其基本程序逻辑为: ...

  3. js for 循环中的 变量问题。

    今日处理项目中的一个循环,本来就是一个小小的for循环,后来发现该段程序出现了问题,仔细检查代码没有发现其中的错误.无奈只好叫来了老大帮忙.通过在模版中断点调试(该方式只能自己写debugger断点) ...

  4. 百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

  5. 输出JS代码中的变量内容

    一. 输出JS代码中的变量内容 1. 可以直接以提示框的形式输出 alert("输出的内容"); 2. 可以输出到网页的某个位置 a. 在显示输出的位置放一个标签 <a id ...

  6. Handlebars.js循环中索引(@index)使用技巧(访问父级索引)

    使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循 ...

  7. 使用javax.script包实现Java设置JS脚本中的变量

    下面例子中,我们通过javax.script包ScriptEngine.put()方法设置JS脚本中的变量,JS把所有在线用户输出. package ajava.code.javase; import ...

  8. 【SQL】小心在循环中声明变量——浅析SQL变量作用域

    本文适用:T-SQL(SQL Server) 先看这个语句: --跑3圈 BEGIN --每圈都定义一个表变量,并插入一行 DECLARE @t TABLE(Col INT PRIMARY KEY) ...

  9. 彻底弄懂js循环中的闭包问题

    来源:http://www.108js.com/article/article1/10177.html?id=899 第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然 ...

随机推荐

  1. Python中import的使用方法

    源文出处: "import"的本质参照: Python中import机制 python导入自定义模块和包

  2. MySQL-第二篇SQL语句基础（1）语句分类及DDL语句

    1.什么是SQL语句 SQL是Structed Query Language的缩写,即结构化查询语言.SQL是操作和检索数据库的标准语言,标准的SQL语句可以操作任何关系数据库. 2.标准的SQL语句 ...

  3. LOJ 2183 / SDOI2015 序列统计 (DP+矩阵快速幂)

    题面 传送门 分析 考虑容斥原理,用总的方案数-不含质数的方案数 设\(dp1[i][j]\)表示前i个数,和取模p为j的方案数, \(dp2[i][j]\)表示前i个数,和取模p为j的方案数,且所有 ...

  4. 用php实现一个简单的爬虫，抓取电影网站的视频下载地址

    昨天没什么事,先看一下电影,就用php写了一个爬虫在视频网站上进行视频下载地址的抓取,这里总结一下抓取过程中遇到的问题 1:通过访问浏览器来执行php脚本这种访问方式其实并不适合用来爬网页,因为要受到 ...

  5. luoguP1966 火柴排队(NOIP2013)(归并排序)

    luogu P1966 火柴排队 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include ...

  6. 攻防世界--logmein

    测试文件:https://adworld.xctf.org.cn/media/task/attachments/a00849bb514c413f8a6526f6bb56c628 1.准备 得到信息 6 ...

  7. Java中的关键字--synchronized

    在并发编程中,synchronized关键字是常出现的角色.之前我们都称呼synchronized关键字为重量锁,但是在JDK1.6中对synchronized进行了优化,引入了偏向锁.轻量锁.本篇介 ...

  8. python常用函数 R

    replace(str, str) 字符串替换. 例子: rjust(int) 格式化字符串,右对齐,支持传入填充值. 例子: rstrip(str) 删去右边的参数,支持传入参数. 例子: roun ...

  9. Center os6.5设置静态ip

    DEVICE="eth0"BOOTPROTO=staticHWADDR="00:0C:29:95:89:35"IPV6INIT="yes"N ...

  10. Go 查找

    sort.SearchInts(a []int, b int) 从数组a中查找b,前提是a必须有序 sort.SearchFloats(a []float64, b float64) 从数组a中查找b ...