码迷,mamicode.com
首页 > 编程语言 > 详细

javascript的异步编程解决方案收集

时间:2017-04-09 12:28:22      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:循环   分析   pre   顺序   chrome   node.js   time   ...   new   

缘起

没理解js异步的同学看下面的例子:

for (var i = 0; i < 5; i++) {
  //模拟一个异步操作 setTimeout(()
=> { console.log(i); }, 1000); }

我们想要的结果是:0,1,2,3,4

结果却出乎意料:5,5,5,5,5

分析

js的特点就是单线程异步非堵塞。需要好好理解这句话:js对于异步操作,不会停下来等待上一个异步操作完成,才进行下一个异步操作。

如果要达到顺序执行,只能用回调:也就是上一个异步操作完成时,再调用下一个异步操作。

要是如上面的循环,要如何操作呢?

解决方法1

通过调用自身解决循环的回调嵌套问题

function sync(i) {
  setTimeout(() => {
    if (i < 5){
      console.log(i);
      i++;
      sync(i);
    }
  }, 1000);
}

sync(0)

解决方法2

使用await/async

优点:直观,符合同步编程思维。其实本质还是异步回调

缺点:大部分浏览器下载还不支持。需要配合Promise使用,需要写成两个函数

服务器端node.js支持。以下代码在最新版chrome浏览器中可以运行:

const f = (i) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(i);
    }, 1000);
  });
};

const testAsync = async () => {
  for (var i = 0; i < 5; i++) {
    const t = await f(i);
    console.log(t);
  }
};

testAsync();

解决方法3

等待补充...

 

 

javascript的异步编程解决方案收集

标签:循环   分析   pre   顺序   chrome   node.js   time   ...   new   

原文地址:http://www.cnblogs.com/slmk/p/6684206.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!