【解决方案】闭包函数在for循环中的使用案例——for循环绑定监听事件索引值总是最后一个
2017-07-24 15:20
309 查看
请看以下两段代码,思考一下运行的结果是否一致呢?
代码一:
for (var i = 0; i < as.length; i++) {
(function () {
var j = i;
as[j].tt = tt;
as[j].onclick = function () {
this.tt.slide(j);
return false;
}
})();
}
代码二:
for (var i = 0; i < as.length; i++) {
// (function () {
// var j = i;
as[i].tt = tt;
as[i].onclick = function () {
this.tt.slide(i);
return false;
}
// })();
}
答案是不一致的,可以在循环内部绑定点击事件中输出索引值,如下:
代码一:
for (var i = 0; i < as.length; i++) {
(function () {
var j = i;
as[j].tt = tt;
as[j].onclick = function () {
console.log(j);
this.tt.slide(j);
return false;
}
})();
}
代码二:
for (var i = 0; i < as.length; i++) {
// (function () {
// var j = i;
as[i].tt = tt;
as[i].onclick = function () {
console.log(i);
this.tt.slide(i);
return false;
}
// })();
}
假设as.length = 3 ;当用户触发点击事件,
代码一运行的结果:1或2或3 (绑定成功);
代码二运行的结果:控制台输出的值始终是 3 (绑定失败)。
原因分析:js引擎的解析机制是,执行的时候将for循环中代码执行,这个时候i变成最后的值,当发生onclick事件时,会找到运算之后的i,因此绑定的事件是最后的。
所以代码一采用了闭包函数的解决方法,成功的将循环的索引值传递到点击函数内部。
此处除了使用闭包的方法外,还可以通过给对象添加一个属性,通过属性来传递索引值,如下代码所示:
for (var i = 0; i < as.length; i++) {
as[i].tt = tt;
as[i].index = i;
as[i].onclick = function () {
console.log(i);
console.log(this.index);
this.tt.slide(this.index);
return false;
}
}
此时输出结果:3,0 或 3,1 或 3,2 (绑定成功)
总之 i 的值是不变的。。。
参考资料: for循环绑定监听事件索引值总是最后一个
代码一:
for (var i = 0; i < as.length; i++) {
(function () {
var j = i;
as[j].tt = tt;
as[j].onclick = function () {
this.tt.slide(j);
return false;
}
})();
}
代码二:
for (var i = 0; i < as.length; i++) {
// (function () {
// var j = i;
as[i].tt = tt;
as[i].onclick = function () {
this.tt.slide(i);
return false;
}
// })();
}
答案是不一致的,可以在循环内部绑定点击事件中输出索引值,如下:
代码一:
for (var i = 0; i < as.length; i++) {
(function () {
var j = i;
as[j].tt = tt;
as[j].onclick = function () {
console.log(j);
this.tt.slide(j);
return false;
}
})();
}
代码二:
for (var i = 0; i < as.length; i++) {
// (function () {
// var j = i;
as[i].tt = tt;
as[i].onclick = function () {
console.log(i);
this.tt.slide(i);
return false;
}
// })();
}
假设as.length = 3 ;当用户触发点击事件,
代码一运行的结果:1或2或3 (绑定成功);
代码二运行的结果:控制台输出的值始终是 3 (绑定失败)。
原因分析:js引擎的解析机制是,执行的时候将for循环中代码执行,这个时候i变成最后的值,当发生onclick事件时,会找到运算之后的i,因此绑定的事件是最后的。
所以代码一采用了闭包函数的解决方法,成功的将循环的索引值传递到点击函数内部。
此处除了使用闭包的方法外,还可以通过给对象添加一个属性,通过属性来传递索引值,如下代码所示:
for (var i = 0; i < as.length; i++) {
as[i].tt = tt;
as[i].index = i;
as[i].onclick = function () {
console.log(i);
console.log(this.index);
this.tt.slide(this.index);
return false;
}
}
此时输出结果:3,0 或 3,1 或 3,2 (绑定成功)
总之 i 的值是不变的。。。
参考资料: for循环绑定监听事件索引值总是最后一个
相关文章推荐
- for循环绑定监听事件索引值总是最后一个
- js图片预加载---for与onload事件,图片数据模型到界面的单项绑定,使用interval模拟循环操作
- jquery循环绑定事件有一个坑----总是绑定最后一个元素
- javascript中循环绑定监听事件的解决方案
- JS中for循环出现的问题:如何给li元素绑定事件,点击每个li元素弹出对应的索引?
- JsRender for index 循环索引使用说明
- js循环绑定事件解决方案
- js循环绑定事件解决方案
- javascript循环绑定事件,只返回最后一个实例,解决办法
- 解决jquery中,使用append增加元素时,该元素的绑定监听事件失效的办法
- for循环绑定事件与闭包
- JS循环给li添加单击事件时总是弹出最后一个i值
- 使用jquery动态生成的标签,需要在代码当中绑定才可以实现事件的监听
- jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法使用的解决方案
- js的一个有意思的小题,闭包解决getElementByTagName的for循环绑定事件错误问题
- js循环绑定事件解决方案
- for循环绑定事件问题
- Effective JavaScript Item 49 对于数组遍历,优先使用for循环,而不是for..in循环
- [Effective JavaScript 笔记]第49条:数组迭代要优先使用for循环而不是for...in循环
- 简单计算器,使用一个监听来绑定不同都事件