setTimeout闭包常见问题

时间:2023-03-08 17:34:57

  经常会遇到这样的问题,setTimeout按序输出循环数字,而不是最后输出同一个数字:

题目:

 for (var i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
}, 1000 * i);
}

解决方案:

 for (var i = 0; i < 5; i++) { // 匿名函数获取值
setTimeout(function (n) {
return function () {
console.log(n);
};
}(i), 1000 * i);
}
 for (var i = 0; i < 5; i++) { // 立即执行函数
(function (n) {
return setTimeout(function () {
console.log(n);
}, 1000 * n);
})(i);
}
 for (let i = 0;i < 5;i++) { // ES6的let,使for循环内部为块级作用域
setTimeout(function() {
console.log(i);
}, 1000 * i);
}