缘起

没理解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

使用co

function* useco(){
for(var i=0; i<5; i++){
yield new Promise((resolve, reject) => {
setTimeout(() => {
resolve(i);
console.log(i);
}, 1000);
});
}
} co(useco);

依赖于上一个异步操作的结果,进行下一个异步操作:

function* useco() {
var x=0;
for (var i = 0; i < 5; i++) {
x= yield new Promise((resolve, reject) => {
setTimeout(() => {
resolve(x+i);
}, 1000);
});
console.log(x);
}
}
co(useco).then(() => {
   console.log('执行完毕');
})
 

co还是很强大的。

解决方法4

等待补充...

javascript的异步编程解决方案收集的更多相关文章

  1. javascript的异步编程

    同步与异步 介绍异步之前,回顾一下,所谓同步编程,就是计算机一行一行按顺序依次执行代码,当前代码任务耗时执行会阻塞后续代码的执行. 同步编程,即是一种典型的请求-响应模型,当请求调用一个函数或方法后, ...

  2. node.js异步编程解决方案之Promise用法

    node.js异步编程解决方案之Promise var dbBase = require('../db/db_base'); var school_info_db = require('../db/s ...

  3. Promise异步编程解决方案

    Promise是ES6中新增的异步编程解决方案,体现在代码中它是一个对象,可以通过 Promise 构造函数来实例化. 其最基本的使用 new Promise(function(resolve,rej ...

  4. JavaScript异步编程解决方案探究

    javascript的天生单线程特性,使得异步编程对它异常重要,早期的通常做法是用回调函数来解决.但是随着逻辑的复杂,和javascript在服务端的大显神通,使得我们很容易就陷入“回调陷井”的万丈深 ...

  5. Func-Chain.js 另一种思路的javascript异步编程解决方案

    本文转载自:https://www.ctolib.com/panruiplay-func-chain.html Func-Chain.js 另一种思路的javascript异步编程,用于解决老式的回调 ...

  6. JavaScript中异步编程

    一 关于事件的异步 事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的.所以这里讲一下事件机制. 在一个js文件中,如果要运行某一个函数,有2中手段,一个就是直 ...

  7. 说一说javascript的异步编程

    众所周知javascript是单线程的,它的设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡死. 所谓的单线程就是一次只能完成一个任务, ...

  8. javascript的异步编程方法

    一,callback 回调函数 即函数f1和函数f2的关系是f1(f2()); f2作为f1()的回调函数,在f1执行过程中就开始执行f2,先执行线程的主要逻辑,将比较耗时的任务放在后面执行. 回调函 ...

  9. nodejs学习笔记 —— 异步编程解决方案

    在js或者node编程中,由于异步的频繁和广度使用,使得回调和嵌套的深度导致编程的体验遇到一些挑战,如果写出优雅和好看的代码,本文主要针对异步编程的主流方案做一些总结 1.事件发布/订阅模式 事件监听 ...

随机推荐

  1. CRC 冗余校验计算

    (1)设G(x)为r阶,则在信息位末尾加r个0形成新信息 r=原信息位数 - 1

  2. C# 数据库查询总结

    首先创建了一个SQL Server数据库作为测试的数据库,建立表并填入测试数据 数据库:SQL Server 数据库名:Blog 表名:Test 注:数据库的连接可以使用“dbl”文件测试,具体使用百 ...

  3. Android学习笔记----TimerTask中显示Toast的问题

    今天想在TimerTask的run函数中调用Toast显示一下提示信息,却总是导致程序崩溃.可是try语句块却又无法捕获到异常,代码如下: ...... Timer timer = new Timer ...

  4. PHP报错: Can&#39;t use method return value in write context

    $dp_id = $this->getParam('dpId'); if(!empty($this->getParam('dpId'))) { $this->smarty->a ...

  5. web安全攻防-环境配置

    1.安装虚拟机VMware Workstation12 PRO 2.在虚拟机上安装kali2.0 3.查看liunx的ip地址ifconfig 4.端口 协议 (1)RDP协议(桌面协议)3389端口 ...

  6. CustomerSOList

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  7. Extjs4中tabPanel

    好文章引用:Extjs4 TabPanel例子 感谢原作者...

  8. c# 简单实现 插件模型 反射方式

    利用反射方式实现插件模型,wpf控件作为插件,然后用另外的窗体加载. 首先定义插件接口: public interface IUserControlLevel1 { string PluginName ...

  9. [代码]JS原生Ajax,GET和POST

    javascript/js的ajax的GET请求: <script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ ...

  10. 当今商业中使用的三种十分重要的IT应用系统

    本文为读书笔记,其中内容摘自<信息时代的管理信息系统>第八版第二章 当今商业中使用的三种十分重要的IT应用系统: 供应链管理(SCM) 客户关系管理(CRM) 电子协同(e-collabo ...