采用自执行的匿名函数解决for循环使用闭包的问题_javascript技巧

这段代码输出的是10个10而不是期望的0到9,因为闭包内是对i的引用,然后函数执行时i已经变成了10

function f1(){
for(var i = 0; i < 10; i++) {
setTimeout(function() {
alert(i);
}, 1000);
}
}
f1();

解决以上的问题可以采用自执行的匿名函数

function f2(){
for(var i = 0; i < 10; i++) {
(function(e) {
setTimeout(function() {
alert(e);
}, 1000);
})(i);
}
}
f2();

这里的匿名函数将i作为参数,这里的e会有i的一个拷贝,而引用时是对e的引用,这就避免了上述的问题

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索循环
, for
闭包
javascript 循环 闭包、匿名函数和闭包、js 匿名函数 闭包、闭包和匿名函数的区别、闭包 匿名函数,以便于您获取更多的相关知识。

时间: 2024-11-09 00:39:42

采用自执行的匿名函数解决for循环使用闭包的问题_javascript技巧的相关文章

JS中关于事件处理函数名后面是否带括号的问题_javascript技巧

今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Level 2.这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获. DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处

JavaScript 匿名函数、模块模式、闭包、命名空间、创建构造器(类)、继承

今天无论是在浏览器中还是在浏览器外,JavaScript世界正在经历翻天覆地地变化.如果我们谈论脚本加载.客户端的MVC框架.压缩器.AMD.Common.js还有Coffeescript--只会让你的脑子发昏.对于那些已经早就熟知这些技术的人而言,或许很难想象到现在为止还有很多JS开发者还不熟悉这些工具,甚至事实上,他们很可能现在还不想去尝试这些工具.这篇文章将会介绍一些很基础的JS知识,以及当开发者想要尝试Backbone.js和Ember.js之类的工具之前需要知道一些内容.当你理解了这篇

js当一个变量为函数时 应该注意的一点细节小结_javascript技巧

先看一段简单的代码: 复制代码 代码如下: var testFun=function (name,age){ var job='Flash Develop'; return new testFun.init(name,age,job); } testFun.init=function(name,age,job){ return 'name:'+name+',age:'+age+',job:'+job+''; } alert(testFun('vincent',30)); //[object Ob

js使用函数绑定技术改变事件处理程序的作用域_javascript技巧

第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下: 复制代码 代码如下: function eventHandler() { alert("当前作用域是 input 元素本身"); } <input type="button" value="单击我" onclick="eventHandler(this)"/> 第二种方式就是将一个函数赋值给一个事件处理程

JavaScript使用setInterval()函数实现简单轮询操作的方法_javascript技巧

本文实例讲述了JavaScript使用setInterval()函数实现简单轮询操作的方法.分享给大家供大家参考.具体分析如下: 轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称"程控输出入"(Programmed I/O).轮询法的概念是,由CPU定时发出询问,依序询问每一个周边设备是否需要其服务,有即给予服务,服务结束后再问下一个周边,接着不断周而复始.轮询法实作容易,但效率偏低. 在JavaScript使用setInterval函数作简单的轮询操作,可以随时

js 事件处理函数间的Event物件是否全等_javascript技巧

这个小问题以前就遇到,却没有去总结 现在又遇到,为了得到准确结论,记录下来: 如题:同一事件 多个执行函数间的Event物件是否全等 例如: 复制代码 代码如下: dom.addEvent('click',fna); dom.addEvent('click',fnb); 1:在fna里对Event物件添加的属性,在其后执行的fnb函数里是对于Event物件是否能访问到? 2:执行fna/fnb函数时的Event物件是否全等 Eventfna===Eventfnb ? 标准的文档太长哪里是说明了这

JavaScript 函数惰性载入的实现及其优点介绍_javascript技巧

最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记.之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因,写出的代码通过大量if判断或者try,catch语句将函数引导到正确代码处. 复制代码 代码如下: <script type="text/javascript"> function createXHR(){ var xhr = null; try { // Firefox, Opera 8.0

C# 使用匿名函数解决EventHandler参数传递的难题_C#教程

首先,动态生成PictureBox,很简单, PictureBox box = new PictureBox() ; box.ImageLocation = imageRoad ; 其次,给PictureBox添加右键菜单,也不难, ContextMenu menu = new ContextMenu(); box.ContextMenu = menu ; 然后,要给右键菜单增加"删除"项,并实现删除图片事件.这个,比较麻烦. MenuItem item = new MenuItem(

js自执行函数的几种不同写法的比较_javascript技巧

经常需要一个函数自执行,可惜这一种写法是错的: 复制代码 代码如下: function(){alert(1);}(); 原因是前半段"function(){alert(1);}"被当成了函数声明,而不是一个函数表达式,从而让后面的"();"变得孤立,产生语法错. 按上面的分析,这一段代码虽说没有语法错,但也是不符合我们的预期的,因为这个函数并没有自执行. 复制代码 代码如下: function(){alert(1);}(1); 综上,症结在于,如何明确代码描述的是一