<!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停止定时。
判断是不是遍历到最后一个元素之后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);