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结束之后,再打印"完成"
最好不要通过嵌套的方法,因为这只是一个小例子,真实情况下,循环外的部分还有很复杂的逻辑结构
最好不要通过修改计时器的方法,因为这里的计时器只是代表一个异步操作,真实情况下,异步操作可能是很复杂的
回答形式:
最好能在我的例子上修改,贴出修改后的代码和执行效果,我验证后会给与采纳,谢谢

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();
乘号打不上换一下,这样即可

1

你好,给你找了一个比较符合你的案例,建议你参考下: https://blog.csdn.net/weixin_39811166/article/details/110795930,如有问题,可以继续留言,如有帮助,望采纳

应该把定时遍历操作移到new Promise之内的函数参数里面,then之前,定时遍历num之后resolve(),再then执行打印完成
new Promise(function(resolve,reject){
//这里改成setInterval
setTimeout(
function(){
console.log(111);
resolve()
},1000);
}).then(
function(resolve){
console.log(1212)
});

定时遍历改成setInterval循环定时,判断num遍历到最后一个元素时clearInterval停止定时。

img

判断是不是遍历到最后一个元素之后resolve()更好一些
let num = [1, 2, 3, 4, 5];
let i = 0;
function queue(num,time){
new Promise(function (resolve, reject) {
num.map(function (value, index) {
setTimeout(function () {
console.log(value);
if(index==num.length-1){
resolve();
}
}, time*i);
i++;
})
}).then(function (resolve) {
console.log("完成");
})
}
queue(num,1000);