在前端开发中尤其是在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. Maven虐我千百遍,我待Maven如初恋

    前言 在如今的互联网项目开发当中,特别是Java领域,可以说Maven随处可见.Maven的仓库管理.依赖管理.继承和聚合等特性为项目的构建提供了一整套完善的解决方案,可以说如果你搞不懂Maven,那 ...

  2. webpack内置模块ProvidePlugin

    webpack配置ProvidePlugin后,在使用时将不再需要import和require进行引入,直接使用即可. 使用方法: 在webpack.dev.conf.js和webpack.prod. ...

  3. POJ3268【最短路】

    题意: n个点m条有向边,每个点有一头牛,每头牛会沿着各自的最短路先到x点,然后又从x点到各自的点,求这些牛中间最短路程最大的牛. 思路: 从x点到各点的最短路不用说了,裸的最短路: 但是从所有点到x ...

  4. 51nod 1099【贪心】

    思路: 我们可以思考对于仅仅两个元素来说,A,B; 先选A的话是会  A.b+B.a; 先选B的话是会 B.b+A.a; 所以哪个小哪个就放前面; #include <cstdio> #i ...

  5. MecanimControl插件随笔

    ----------------------------------------- 4个animatorController是怎么回事? 分别对应 1镜像动画速度>0 2镜像播放速度<0 ...

  6. 洛谷P3292 [SCOI2016]幸运数字(倍增+线性基)

    传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 第一眼:这不会是个倍增LCA暴力合并线性基吧…… 打了一发……A了? 所以这真的是个暴力倍增LCA合并线性基么…… ps:据某大佬说其实可以离线之后 ...

  7. JS中一个new到底做了哪些事情?

    1.https://www.cnblogs.com/faith3/p/6209741.html 2.https://www.cnblogs.com/AaronNotes/p/6529492.html

  8. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  9. mongodb数据库分片实现链接

    http://www.lanceyan.com/tech/arch/mongodb_shard1.html

  10. 使用JMETER进行REST API测试(分步指南)

    我确定你在这里是因为你需要加载测试Json Rest API.这并不奇怪,因为Rest API现在越来越受欢迎. 这本指南的目的:帮助您进行负载测试一个Json的 REST API 通过一个具体的例子 ...