流年似水博客开通了,本站主要是写关于Web和大数据方面内容,正在更新中,欢迎大家光临!
  1. 文章:97 篇
  2. 总浏览:33,682 次
  3. 评论:22条
  4. 最后更新:2020-06-08
  5. 分类目录:39 个

Javscript中for循环异步执行解决办法(有案例)

Javascript l, xy 309℃ 0评论

Javascript中异步执行需求详解

需求一:for循环内有异步请求,但是必须等到一次循环执行以后才能执行下一个循环

        1.1 案例需求:

                循环1-10,在循环内有异步操作,需要连续打印出1-10。 我们使用setTimeout()函数模拟异步操作。

        1.2 分析

                这个需要看似简单,如果没有异步的话,直接一个for循环就可以搞定,但是循环里面有异步。有可能第一次循环还没异步还没有完成,下一步循环已经执行完成了。

            这里我们使用ES6中的Promise、async、await等解决。 

        1.3 代码实现

                


async function main() {
for (let i = 0; i < 20; i++) {
await sync(i).then(value => {
console.log("success ==>" , value);
}).catch(value => {
console.log("fail ==>" , value);
});
}
}



function sync(i) {
return new Promise((resolve, reject) => {
setTimeout(function () {
// 模拟异步执行成功,或者失败
const is_success = Math.random() >= 0.5;
if (is_success){
// 异步成功执行方法
resolve(i);
} else {
reject(i);
}
}, Math.random() * 2000);
});
}

main();

执行结果:

这个执行的结果,每次是不同的。因为异步执行成功还是失败是不确定的。

需求二:for循环内有异步操作,我们不关心异步for循环内异步操作的顺序,但是我们关心一定要等到for循环内所有的异步操作执行完毕以后,才能执行for循环以后的操作

    2.1 需求:

        for循环打印1-10,循环内有异步操作,一定要保证for循环内异步操作执行完毕以后,才能执行之后的操作。我们使用setTimeout()函数模拟异步操作。

    2.2 分析:

            我们可以使用一个函数封装for循环的操作,使用Promise控制for循环结束条件。

    2.3 代码


function fn(){
return new Promise((resolve , reject) => {
let j =0;
let success_num = 0;
let fail_num = 0 ;
for (let i =0 ; i < 10 ; i++){
// 使用自执行函数防止i的值被修改
(function(i){
setTimeout(function(){
// 模拟异步执行成功,或者失败
const is_success = Math.random() >= 0.5;
j++;

if (is_success){
success_num ++;
console.log("success ==>" + i);
} else {
fail_num ++;
console.log("fail ==>" + i);
}

if (j == 10){
let obj = {success:success_num , fail:fail_num}
resolve(obj)
}
},Math.random() * 2000);
})(i);

}

});
}



fn().then(value => {
console.log(value);
console.log("执行for循环以后代码。。。。。");
})


执行结果:

3. 有关ES6中Promise 、await、async的用法请参考:http://es6.ruanyifeng.com/

转载请注明:流年似水 » Javscript中for循环异步执行解决办法(有案例)

喜欢 (3)or分享 (0)

Warning: copy(https://cn.gravatar.com/avatar/?s=54&d=%2Fwp-content%2Fthemes%2Fyusi1.0%2Fimg%2Fdefault.png&r=g): failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 239

Warning: copy(/wp-content/themes/yusi1.0/img/default.png): failed to open stream: No such file or directory in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 243
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址