js实现异步循环实现代码

你遇到的问题是异步循环中常见的现象：异步函数在执行时，其引用的变量可能已经被改变。这是因为JavaScript的异步函数不等待代码执行完成就继续执行其他任务，这就导致了在setTimeout执行时，循环已经执行完毕，变量i的值已经变为最后一次循环的值。

这个问题可以通过创建一个新的作用域来解决，让每个循环迭代有自己的作用域和变量副本。这就是我们通过自调用函数实现的：每次循环都会创建一个新的函数作用域，并将当前的i值传递给这个作用域。这样就能确保每个异步操作都有它自己的i值副本，避免影响其他的异步操作。

```javascript

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

// 创建新的函数作用域并立即执行，传递当前的i值作为参数

(function(num){

setTimeout(function(){

// 在新的函数作用域内打印参数num的值

document.writeln(num);

document.writeln("
");

}, 1000); // 设置延迟为1秒

})(i); // 执行函数并传递当前的i值作为参数

}

```

这样，每次循环都会创建一个新的函数作用域，每个作用域都有自己的变量副本。setTimeout在每次迭代时都会打印正确的索引值。这种实现方式不仅解决了异步循环的问题，还展示了JavaScript中函数作用域和闭包的强大功能。这种技术在实际开发中非常有用，可以帮助我们更好地管理异步代码的执行。