JavaScript异步仿同步(控制流)的实现
在前端开发中尤其是在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异步仿同步(控制流)的实现的更多相关文章
- 漫话JavaScript与异步·第三话——Generator:化异步为同步
一.Promise并非完美 我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题.硬编码回调执行顺序造成的"回调金字塔"问题,无疑大大提 ...
- JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上
众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- javascript异步编程的前世今生,从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...
- 【转】JavaScript 异步进化史
前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...
- C#中的异步和同步
同步 同步(英语:Synchronization [ˌsɪŋkrənaɪ'zeɪʃn]),指对在一个系统中所发生的事件(event)之间进行协调,在时间上出现一致性与统一化的现象.说白了就是多个任务一 ...
- Promises与Javascript异步编程
Promises与Javascript异步编程 转载:http://www.zawaliang.com/2013/08/399.html 在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这 ...
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
- 5分种让你了解javascript异步编程的前世今生,从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是 ...
随机推荐
- JsonCpp——json文件的解析
定义: 官网: http://json.org/ 在线解析器:http://json.cn/ http://www.bejson.com/ JSON(JavaScript Object Notatio ...
- 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async
JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...
- E20190308-hm
sweep vt. 扫除; 打扫,清理; 彻底搜索; 掠过; vi. 打扫; 扫过; 蜿蜒; 大范围伸展; n. 打扫; 延伸; 挥动; 全胜;
- 483. Smallest Good Base
For an integer n, we call k>=2 a good base of n, if all digits of n base k are 1. Now given a str ...
- Lightoj 1021【状压DP(未搞)】
状态压缩一下,然后DP还是很容易想到,dp[i][j]表示状态为i时,模 k 为 j 的排列数的个数,然后每次对一个状态扩展,添加新的数字: 然而那个取膜没懂.....
- hdoj2577【多种状态】(简单DP)
#include <stdio.h> #include <iostream> #include <sstream> #include <string.h> ...
- SpringBoot2.0 基础案例(02):配置Log4j2,实现不同环境日志打印
一.Log4j2日志简介 日志打印是了解Web项目运行的最直接方式,所以在项目开发中是需要首先搭建好的环境. 1.Log4j2特点 1)核心特点 相比与其他的日志系统,log4j2丢数据这种情况少:d ...
- JDK1.7 和 jetty配置教程
系统是windows 7 64位版本,32位版本同理,xp系统的自己google设置环境变量 打开设置环境变量窗口,右键计算机->我的电脑,选择属性 点击高级系统设置 选择环境变量 红线为需要设 ...
- hdu 2108 Shape of HDU(判定是不是凸多边形)
#include <iostream> #include <algorithm> #include <cstring> #include <cstdio> ...
- 10M光纤与下载速度KB/s、MB/s的换算
我们经常听说谁开的宽带是4M或10M或20M等等.那这和我们所说的网速“多少MB/s”.“多少KB/s”等同吗? 其实这不是一个概念. 在宽带运营商那里开的宽带,比如4M,其实是说4M bit/s,即 ...