javascript用于循环和超时函数

for (var x = 0; x < 5; x++) {
var timeoutFunction = function() {
return function() {
console.log(x)
}
}
setTimeout(timeoutFunction(), 1)
}

var x = 10
for (var x = 0; x < 5; x++) {
var timeoutFunction = function() {
return function() {
console.log(x)
}
}
setTimeout(timeoutFunction(), 1)
}

for (var x = 0; x < 5; x++) {
var timeoutFunction = function() {
return function() {
console.log(x)
}
}
setTimeout(timeoutFunction(), 1)
}
var x = 10

for (var x = 0; x < 5; x++) {
var timeoutFunction = function(x) {
return function() {
console.log(x)
}
}
setTimeout(timeoutFunction(x), 1)
}

至于意外输出，您会遇到这种行为，因为timeoutFunction包含对在更高范围中声明的x变量的引用。这导致在x变量周围创建一个闭包，这样，每次运行函数时，它都不会为自己获得x的副本，但它共享x值，因为它是在更高的范围中声明的。这是闭包的典型副作用。

有几种方法可以调整语法来解决问题。。。

制作x的副本，并通过将x传递到函数中，让每个函数使用自己的副本。当您传递一个基元类型(布尔值、数字、字符串)时，会创建一个数据副本，这就是传递的内容。这打破了对共享x作用域的依赖。最后一个例子是这样做的：

for (var x = 0; x < 5; x++) {
var timeoutFunction = function(x) {
return function() {
console.log(x)
}
}
// Because you are passing x into the function, a copy of x will be made for the
// function that is returned, that copy will be independent of x and a copy will
// be made upon each loop iteration.
setTimeout(timeoutFunction(x), 1)
}

如果您的超时函数没有返回另一个函数(因为没有函数可以将值传递给)，则需要另一个执行相同操作的示例。因此，这个例子创建了一个额外的函数：

for (var x = 0; x < 5; x++) {

// This time there is no nested function that will be returned,
function timeoutFunction(i) {       
console.log(i);        
}

// If we create an "Immediately Invoked Funtion Expression" (IIFE),
// we can have it pass a copy of x into the function it invokes, thus
// creating a copy that will be in a different scope than x.
(function(i){        
setTimeout(function(){
timeoutFunction(i);  // i is now a copy of x
}, 1);
}(x));
}

如果您使用的浏览器支持ECMAScript 2015标准，您可以简单地将循环中的var x声明更改为let x，这样x在循环的每次迭代时都会获得块级作用域：

// Declaring a variable with let causes the variable to have "block-level"
// scope. In this case the block is the loop's contents and for each iteration of the
// loop. Upon each iteration, a new "x" will be created, so a different scope from 
// the old "x" is what's used.
for (let x = 0; x < 5; x++) {
var timeoutFunction = function() {
return function() {
console.log(x)
}
}
setTimeout(timeoutFunction(), 1)
}

for (var x = 0; x < 5; x++) {
var timeoutFunction = (function(x) {
return function() {
console.log(x)
}
})(x)
setTimeout(timeoutFunction(), 1)
}

for (let x = 0; x < 5; x++) {
var timeoutFunction = function() {
console.log(x)
}
setTimeout(timeoutFunction(), 1)
}

for(let x = 0; x < 5; x++) {
var timeoutFunction = function() {
console.log(x);
};
setTimeout(timeoutFunction, 1);
};
console.log('For loop completed');