JavaScript异步编程插件–jsDeferred.js

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