背景
很多时候在笔试题中会出现以下的看题输出什么
for (var i = 1; i <= 5; i++) {
setTimeout(() => {
console.log(i)
}, i * 1000)
}
解决方案
使用IIFE
在迭代内使用IIFE(立即调用函数表达式)会为每个迭代都生成一个新的作用域,使得延迟函数的回调可以将新的作用域封闭在每个迭代内部
for (var i = 1; i <= 5; i++) {
(function(j) {
setTimeout(() => {
console.log('IIFE' + j)
}, j * 1000)
})(i)
}
使用let声明
使用let声明,变量会在每次迭代中都会声明
for (let i = 1; i <= 5; i++) {
setTimeout(() => {
console.log('let' + i)
}, i * 1000)
}
使用bind
使用bind的预先处理机制,在循环的时候就把每次执行函数需要输出的结果,预先传给函数即可
var fn = function(i) {
console.log('bind' + i)
}
for (var i = 1; i <= 5; i++) {
setTimeout(fn.bind(null, i), i * 1000)
}
如果本文有什么不对的地方请指正。