在前端开发中尤其是在nodejs开发中经常会遇到这样的场景(以ajax为例):有3个(或者更多个)Ajax请求,并且第2个请求依赖于第1个,第3个请求依赖于第2个,那我们可能就会在发第一个Ajax后回调再执行第二个Ajax,第二个执行后再在回调里面执行第三个,如此就形成了回调金字塔了,也显得复杂,当然这种问题也有许多插件,如:Promise、async等。 自己写了一个简单的实现方法:

/**
* 控制流/同步
* @param {Array} arr
* @param {Function} callback1 传递两个参数 (item,next),执行完一项则需执行next()才能执行下一项
* @param {Function} callback2 出错或执行完时回调
* @returns {*}
*/
function async (arr, callback1, callback2) {
if (Object.prototype.toString.call(arr) !== '[object Array]') {
return callback2(new Error('第一个参数必须为数组'));
}
if (arr.length === 0)
return callback2(null);
(function walk(i) {
if (i >= arr.length) {
return callback2(null);
}
callback1(arr[i], function () {
walk(++i);
});
})(0);
}

使用示例:

var arr = ['/a', '/b', '/c', '/d'];
async(arr, function(item, next){
$.ajax({
url:item,
complete:function(){
next();
}
});
},function(err){
console.log(err);
});

JavaScript异步仿同步(控制流)的实现的更多相关文章

  1. 漫话JavaScript与异步·第三话——Generator:化异步为同步

    一.Promise并非完美 我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题.硬编码回调执行顺序造成的"回调金字塔"问题,无疑大大提 ...

  2. JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  3. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  4. javascript异步编程的前世今生,从onclick到await/async

    javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...

  5. 【转】JavaScript 异步进化史

    前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...

  6. C#中的异步和同步

    同步 同步(英语:Synchronization [ˌsɪŋkrənaɪ'zeɪʃn]),指对在一个系统中所发生的事件(event)之间进行协调,在时间上出现一致性与统一化的现象.说白了就是多个任务一 ...

  7. Promises与Javascript异步编程

    Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...

  8. Javascript 异步加载详解

    Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...

  9. 5分种让你了解javascript异步编程的前世今生,从onclick到await/async

      javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...

随机推荐

  1. vue仿淘宝地址选择组件

    Vue组件:省市区地址选择组件 <template> <div v-show="addressSelectShow" :style="{'left': ...

  2. E20190407-hm

    conclude  vt. 推断; 结束,终止; 议定; vi. 终了; 作出决定或达成协议; interjection  n. 叹词,感叹词; definitely  adv. 明确地; 确切地; ...

  3. E20180608-hm

    更新: 2019/02/19 原来忘记分类,把此博文归入单词类 capacity  n. 容量; 性能; 才能; 生产能力;

  4. CodeForces599D【数学】

    题意: 给出一个x,求有多少个矩阵中满足存在x个不同的正方形. 思路: (数学渣+推理渣) #include<bits/stdc++.h> using namespace std; typ ...

  5. ThinkPHP3.2.3学习笔记5---模板(一)

    一.模板简介 此文中的学习笔记部分资料是来自于thinkphp官方文档,http://document.thinkphp.cn/manual_3_2.html#template 本章的内容主要讲述了如 ...

  6. centos 7.3 安装vmtools,解决无法编译共享文件夹模块

    环境说明: vmware 12.5.0 build-4352439 centos 7.3.1611   64位,内核版本:Linux version 3.10.0-514.16.1.el7.x86_6 ...

  7. 百度搜索:有关Baiduspider的10个问题

    猫宁!!! 参考链接: http://help.baidu.com/question?prod_id=99&class=476&id=2996 https://ziyuan.baidu ...

  8. 【NOI省选模拟】小奇的花园

    「题目背景」 小奇在家中的花园漫步时,总是会思考一些奇怪的问题. 「问题描述」 小奇的花园有n个温室,标号为1到n,温室以及以及温室间的双向道路形成一棵树. 每个温室都种植着一种花,随着季节的变换,温 ...

  9. 结合 webpack 使用 vue-router(七)

    结合 webpack 使用 vue-router: 首先安装路由包vue-router: cnpm install vue-router 使用模块化工具导入 vue-router 后,必须手动调用 V ...

  10. nacos启动

    nacos下载 https://github.com/alibaba/nacos 1.执行数据库脚本 2.修改配置文件application.propertiesspring.datasource.p ...