JS闭包在循环中的运用

window.onload=function(){
      var btn=new Array();
      for(var i=0;i<5;i++)
      {
      btn[i]=document.createElement("button");
      var node=document.createTextNode("按钮"+i);
      btn[i].appendChild(node);
      var element=document.getElementById("div1");
      element.appendChild(btn[i]);
      (
        function(i){
        btn[i].onclick=function()
        {
        alert(i);
        }
      })(i);

  }
 }

如果上面不用闭包括起来就会一直弹出5,今天在群里知道的,受用了。

时间: 2024-10-30 21:24:10

JS闭包在循环中的运用的相关文章

js的for循环中出现异步函数,回调引用的循环值总是最后一步的值?

这几天跟着视频学习node.js,碰到很多的异步函数的问题,现在将for循环中出现的异步函数回调值的问题总结如下: 具体问题是关于遍历文件夹中的子文件夹的,for循环包裹异步函数的代码: for (var i = 0; i < files.length; i++) { var itemFile = files[i]; fs.stat("./uploads/" + itemFile, function (err, stats) { if (stats.isDirectory())

JS闭包导致循环给按钮添加事件时总是执行最后一个

加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= list_obj.length; i++) { list_obj[i].onclick = function() { alert(i); } } </script> 运行后,奇怪的发现无论点击那个li标签,alert出的都是最后一个的内容,5 下面做下分析:因为在for循环里面指定给list_o

Js闭包与循环

目标:点击任何一个li,提示当前点击位置 <ul> <li>第1个</li> <li>第2个</li> <li>第3个</li> <li>第4个</li> <li>第5个</li> </ul> <script> var li = document.getElementsByTagName('li'); for (var i = 0; i< li.

js的for循环中出现异步函数,回调引用的循环值始终是最后的值

一.问题 今天工作中解决bug发现是由“for循环的异步函数,回调引用的循环值始终是最后的值”的现象导致的,如: for (var i = 0; i < files.length; i++) { var itemFile = files[i]; fs.stat("./uploads/" + itemFile, function (err, stats) { if (stats.isDirectory()) { console.log(itemFile+i); } else { c

js闭包for循环总是只执行最后一个值得解决方法

<style> li{ list-style: none;width:40px;height: 40px;text-align:center;line-height: 40px;cursor: pointer; } </style> html代码: <ul id="uls">    <li style="background:#aaa">0</li>    <li style="backgr

浅谈JS闭包中的循环绑定处理程序

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 前几天工作中写前端js代码时,遇到了遍历元素给它添加单击事件. (PS:之前也在<jQuery基础教程>第四版中看过讲循环绑定处理程序的内容,当时估计也没怎么用心看,所以没记起来.) 大神要是知道这类情况,可以关掉窗口,写这些主要是给像我一样的小白看的,谢谢! 先贴上错误的例子让大家

(转)深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

深入理解JavaScript的闭包特性如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head&g

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head> 4.  <meta charset="utf

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

使用Handlebars.js过程中,难免会使用循环,比如构造数据表格.而使用循环,又经常会用到索引,也就是获取当前循环到第几次了,一般会以这个为序号显示在页面上. Handlebars.js中获取循环索引很简单,只需在循环中使用{{@index}}即可. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type content="text/html; charset=utf-