自执行方法传参解决for循环嵌套异步函数的问题

通过使用自执行方法传参的方法解决for循环嵌套异步函数的问题

在使用for循环嵌套异步函数的时候,会产生执行顺序混乱或者是执行结果全部是最后一次循环执行的结果。如下方代码示例:


自执行方法传参解决for循环嵌套异步函数的问题_第1张图片
图-1

在for循环中写了一个异步函数,结果执行的结果全是最后一次循环执行的结果。

通过一个简单demo示范一下,在for循环中嵌套一个setTimeout方法,示例代码如下:

自执行方法传参解决for循环嵌套异步函数的问题_第2张图片
图-1

代码执行结果如下:

自执行方法传参解决for循环嵌套异步函数的问题_第3张图片
图-2

果然,打印出了5个5和5次undefined.

究其原因是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循环嵌套异步函数的问题_第4张图片
图-3

代码执行结果如下:

自执行方法传参解决for循环嵌套异步函数的问题_第5张图片
图-4

总结:在for循环中嵌套异步函数导致的循环次数混乱或者是执行结果为最后一次循环执行结果的问题,使用自执行函数传参是解决的方法之一。

你可能感兴趣的:(自执行方法传参解决for循环嵌套异步函数的问题)