阅读 84 SEO

for循环里的异步操作如何处理

首先来看一个比较简单的问题,我们想实现的就是每隔1s输出0-4的值,就是这么简单,看下错误写法

function test() {
    for (var i = 0; i < 5; ++i) {
        setTimeout(function() {
            console.log("index is :", i);
        }, 1000);
    }}test();

以上代码会如何输出?输出如下

index is : 5index is : 5index is : 5index is : 5index is : 5

而且该操作几乎是在同一时间完成,setTimeout定时根本就没有起作用,这是因为:单线程的js在操作时,对于这种异步操作,会先进行一次“保存”,即把异步操作放到堆栈中,等前面的程序执行完,堆栈中的异步操作就会执行。等到整个for循环执行结束后,此时i的值已经变成5,因为setTimeout是写在for循环中的,相当于存在5次定时调用,这5次调用均是在for循环结束后进行的,所以自然而然输出都是5,正确的实现有几种,一般情况下,如下:

递归

box6();
 function box7(param) {
    if (param < 5) {
        console.log("index is :", param);
        setTimeout(function() {
            box7(param + 1);
        }, 1000)
    }}box7(0);

正确实现每隔1s打印输出如下:

index is : 0index is : 1index is : 2index is : 3index is : 4

使用递归实现的倒计时:

function showTime(count) {
    console.log("count is : ", count);
    if (count == 0) {
        console.log("All is Done!");
    } else {
        count -= 1;
        setTimeout(function() {
            showTime(count);
        }, 1000);
    }}
 showTime(20);

自执行函数

function test() {
    for (var i = 0; i < 5; ++i) {
        (function(i){
        setTimeout(function() {
            console.log("index is :", i);
        }, 1000)
        })(i)
    }}test();

异步操作使用异步函数包裹起来,i每次执行都不把i作为参赛传到函数中

let 声明i

function test() {
    for (let i = 0; i < 5; ++i) {
        setTimeout(function() {
            console.log("index is :", i);
        }, 1000)
    }}test();

async、await实现

var asyncFunc = function(arr, i) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            arr.push(i);
            console.log("index is : ", i);
            resolve();
        }, 1000);
    });}
 var box5 = async function() {
    var arr = [];
    for (var i = 0; i < 5; i++) {
        await asyncFunc(arr, i);
    }
    console.log(arr);}
 box5();

同样实现每隔1s正确地打印输出如下:

index is :  0index is :  1index is :  2index is :  3index is :  4[ 0, 1, 2, 3, 4 ]

使用promise,函数会等待他执行完才会继续执行下一行代码,相当于是同步代码



作者:为光pig
链接:https://www.jianshu.com/p/31ab0ba91371


文章分类
后端
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐