关于在js 代码中for循环嵌套异步函数的问题

使用递归函数解决for循环中嵌套异步函数的问题

在for循环中嵌套异步函数的时候,会出现循环顺序混乱或者是结果都是最后一次执行循环结果的问题。如下面的示例:

设一个数组a[1,2,3,4,5],在for循环里面嵌套一个setTimeout方法,并将本次循环的次数和数组的内容打印出来。代码如下:


代码执行结果为:


原因是:for循环有一个特点,就是“i判断失败一次才停止”。所以,i在不断的自加1的时候,直到i等于5,i才失败,这时候循环体不再执行,会跳出,所以i等于5没错。那么为什么5次循环的i都等于5?原因就是setTimeout()的回调,也就是console.log(i);console.log(arr[i]);被压到任务队列的最后,for循环是同步任务,所以先执行,等于是空跑了5次循环。于是,i都等于5之后,console.log(i);console.log(arr[i]);刚开始第一次执行,当然输出全是5。

解决方法:使用递归函数代替for循环

如下面代码示例:

图-3

通过递归函数确保异步函数执行完在去改变循环变量值,确保循环的正确执行。

代码执行结果如下:

图-4

总结:在for循环中嵌套异步函数的时候回产生循环顺序混乱或者结果是执行最后一次循环结果的现象,使用递归函数代替for循环是解决问题的办法之一。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容