JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,在ES6还没发布的时候一般都是用jquery提供的deferred对象,在《jquery Deferred对象 延迟对象》在有介绍,其实jquery中提供的队列函数也可以简单实现回调的功能《jQuery队列函数同步执行queue()、dequeue()、clearQueue()和.delay()》。在不久前介绍过另一个异步编程插件《js异步模块以及回调–async.js》。
不管jquery的$.Deferred()和async.js他们都是解决了回调的问题,现在介绍另一款插件jsDeferred.js,其实它的思路和现在ES6添加的Promise对象思路是相似的,因为Promise/A+规范的制定基本上是奠定在jsDeferred上。
官网:https://cho45.stfuawsc.com/jsdeferred/
下面来介绍jsDeferred.js使用
官网有几个版本,其中有一个是基于jquery下扩展的,如果你经常使用jquery的话推荐使用jquery版本的
jsdeferred.jquery下载:jsdeferred.jquery
目前测试兼容IE7以上浏览器(IE6没测试)
如何调用
<script type="text/javascript" src="jsdeferred.js"></script> <script> 方式一:(个人喜欢这种方式) Deferred.define(); next(function () { alert("Hello!"); }). next(function () { alert("World!"); }); 方式二: Deferred.next(function () { alert("Hello!"); }). next(function () { alert("World!"); }); 方式三: var d = new Deferred(); d.next(function () { document.title=1; }). next(function () { document.title=2; }); d.call(); </script> 自己选喜欢的方式用吧
以后讲解案例就使用第一种方式说明
next()队列执行,类似回调作用
以往的写法内置回调嵌套 http.get("/foo.json", function (dataOfFoo) { http.get("/bar.json", function (dataOfBar) { http.get("/baz.json", function (dataOfBaz) { alert([dataOfFoo, dataOfBar, dataOfBaz]); }); }); }); next(function () { return http.get("/foo.json").next(function (data) { results.push(data); }); }). next(function () { return http.get("/baz.json").next(function (data) { results.push(data); }); }). next(function () { return http.get("/baz.json").next(function (data) { results.push(data); }); }). next(function () { alert(results); }); //next写法至少比第一种写法清晰多了
数据传递
next(function(){ alert(1); return [1,2] //只有reture才能把数据传递给下一个函数 }). next(function(data){ console.log(data); //这里data就是获取到上一步return出来的数据[1,2] });
parallel() 合并回调
parallel(fn)、parallel([])、parallel({}) //支持3中格式
parallel( function(){ return 1; }, function(){ return 2; }, function(){ return 3; } ).next(function(data){ console.log(data); //[1,2,3] }); ----------------- parallel([ function(){ return 1; }, function(){ return 2; }, function(){ return 3; } ]).next(function(data){ console.log(data); //[1,2,3] }); -------------------- parallel({ foo: next(function () { return 1; }), bar: next(function () { return 2; }) }).next(function (values) { console.log(values);// => Object { foo=1, bar=2 } });
Error 出错回调
我们写逻辑代码在进行判断时候如果满足条件就继续执行,如果不满足条件或者出错就执行错误的回调
next(function () { console.log(0); }). next(function () { console.log(1); throw {err:'错了'}; //抛出错误 }). next(function () { console.log(2); //这步不会执行 }). error(function (e) { console.log(e); //{err:'错了'} //处理错误的回调 }). next(function () { //继续执行 console.log(3); });
wait()时间延迟加载
next(function () { console.log(0); return wait(5); //5秒后才继续执行下一步 }). next(function () { console.log(1); })
嵌套
next(function () { alert(1); //第一步 return next(function () { alert(2); //第二步 }). next(function () { alert(3); //第三步 }); }). next(function () { alert(4); //第四步 }); 如果没有 return next(function () { alert(1); //第一步 next(function () { alert(2); //第三步 }). next(function () { alert(3); //第四步 }); }). next(function () { alert(4); //第二步 });
loop()循环 类似for循环
loop(1000, function (n) { //n索引从0开始 // heavy process });
call() //可以理解为一个jsDeferred内置提供的执行函数吧!,直接上案例不太好说明
next(function () { function pow (x, n) { //定义了pow函数但是没执行 return x+n; } return call(pow, 2, 10); // (要执行的函数,带入的参数1,带入的参数2) }). next(function (n) { console.log(n); //12 }); call(function (text) { console.log(text);//=> linkFly }, 'linkFly'); console.log('hello,world!');// => 先输出
判断某实例化的对象是否为jsDeferred内置的
var obj =new wo(); Deferred.define(); console.log(Deferred.isDeferred(obj));//=> false console.log(Deferred.isDeferred(wait(2)));//=> true本文地址: http://www.xgllseo.com?p=5017