赵小帅go 2021-07-04 01:33 采纳率: 50%
浏览 132
已采纳

js 循环含有异步操作,如何保证循环中的所有异步操作都执行完之后,再执行循环之外的部分?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script type="text/javascript">
    function queue(num){
        return new Promise(resolve=>{
            resolve();
        }).then(
            value=>{
                let promise=Promise.resolve();
                num.map(v=>{
                    promise=promise.then(_=>{
                        return new Promise(resolve=>{
                            //异步操作
                            setTimeout(() => {
                                console.log(v);
                                resolve();
                            }, 1000);
                        })
                    })
                })
            }
        )
    }
    new Promise(resolve=>{
        resolve();
    }).then(
        _=>{
            let num=[1,2,3,4,5];
            return Promise.resolve(num);
        }
    ).then(
        value=>{
            queue(value);
        }
    ).then(
        value=>{
            console.log("完成");
        }
    )
 
</script>   
</body>
</html>

问题:
如何将queue函数中的所有异步操作(每隔1s按顺序打印1个数字)都执行完之后,再执行最后的then方法,打印"完成"?
说明:
效果是每隔1s打印15结束之后,再打印"完成"
最好不要通过嵌套的方法,因为这只是一个小例子,真实情况下,循环外的部分还有很复杂的逻辑结构
最好不要通过修改计时器的方法,因为这里的计时器只是代表一个异步操作,真实情况下,异步操作可能是很复杂的
回答形式:
最好能在我的例子上修改,贴出修改后的代码和执行效果,我验证后会给与采纳,谢谢

展开全部

  • 写回答

6条回答 默认 最新

  • 冬树叶 2021-07-04 03:32
    关注

    let num = [1, 2, 3, 4, 5];
    let i=0;
    function queue(){
    new Promise(function (resolve, reject) {
    num.map(function (value, index) {
    setTimeout(function () {
    console.log(value);
    }, 1000乘以i);
    i++;
    })
    setTimeout(() => {
    resolve();
    }, 1000乘以(i-1));

    }).then(function (resolve) {
    console.log("完成");
    })
    }
    queue();
    乘号打不上换一下,这样即可

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部