谈谈JQuery的Deferred对象

最近一个变态的项目，一个页面只含编辑器且有下载功能，大概含20个左右接口，要求数据完整显示（很多echarts图），弄个等待圈圈等它loading，启用jQuery的Deferred延迟对象，再多的接口也不怕了。（之前没有用过Deferred对象，姑且谈谈吧）

$.ajax()，低于1.5.0版本的jQuery，返回的是XHR对象，高于1.5.0版本jQuery，返回的是Deferred对象。

$.when()，when通常执行0个或多个异步事件的Deferred延迟对象的回调函数；

当参数为多个延迟对象的回调函数，当所有的延迟对象都通过Deferred，Deferred对象才会执行resolve解决方法，然后返回一个Deferred延迟对象；如果其中有任意一个延迟对象的回调函数执行失败，该延迟对象会执行reject拒绝方法，立即执行fail方法，或者是then方法的的 failCallbacks，即$.when(a(),b()).then(donecallback,failcallback);

1     $.when(a(),b()).then(donecallback,failcallback);
2     function a(){
3         return $.ajax();
4     }
5     function b(){
6         return $.ajax();
7     }

Deferred对象常用的延迟方法有then、done、always、fail、promise、reject，resolve。

以下各个方法解释来源于JQuery API中午文档。

deferred.then()，当Deferred延迟对象解决，拒绝或仍在进行中时，调用回调函数（donecallback，failcallback）。

deferred.done()，当Deferred延迟对象解决时，调用回调函数。

deferred.always()，当Deferred延迟对象解决或拒绝时，调用回调函数。

deferred.fail()，当Deferred延迟对象拒绝时，调用回调函数。

deferred.promise()，没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口（此处引用阮一峰的JQuery的deferred对象详解）。

deferred.reject()，拒绝Deferred延迟对象，并根据给定的args参数调用任何失败回调函数（failCallbacks）。

deferred.resolve()，解决Deferred延迟对象，并根据给定的args参数调用任何完成回调函数（doneCallbacks）。

如果多个接口只是传参值不一样，这些变量直接定义在函数里，例如：

1     function a(){
2         var arr = ['param1','param1'];
3         var url = '/';
4         for(var i = 0; i<arr.length;i++){
5             $.ajax(url+arr[i],function(){});
6         }
7     }

这样怎么返回一个Deferred对象呢？

首先可以定义一个数组来存储Deferred对象集合；

 1     function a(){
 2         var arr = ['param1','param1'];
 3         var url = '/';
 4         var defferedArr = [];
 5         for(var i = 0; i<arr.length;i++){
 6             defferedArr.push((function(i){
 7                 return $.ajax(url+arr[i],function(){});
 8             })(i));
 9         }
10         return $.when.apply($,defferedArr);//return $.when.call($,defferedArr[0],defferedArr[1],);
11     }

这样就完了吗？你想想哪里陷阱？
由于每个请求的时间不一样，请求顺序并非按计划执行，i值可能存在变量提升，这里需要用闭包处理：

 1     function a(){
 2         var arr = ['param1','param1'];
 3         var url = '/';
 4         var defferedArr = [];
 5         for(var i = 0; i<arr.length;i++){
 6             (function(i){
 7                 defferedArr.push((function(i){
 8                     return $.ajax(url+arr[i],function(){});
 9                 })(i));
10             })(i);
11         }
12         return  $.when.apply($,defferedArr);
13     }

如果现在不是$.ajax()那样直接返回的是一个Deferred对象，应该怎么处理呢？这时候需要生成一个Deferred对象，可这样操作：

 1     function c(){
 2          var $d = $.Deferred(); //创建一个Deferred对象
 3          //code
 4          var arr = [1,2,3];
 5          $d.resolve(arr); //改变Deferred执行状态，resolve方式可带参数
 6          return $d; //返回一个新的Deferred对象，如果创建的Deferred对象是全局的，return $d.promise();阻止执行状态
 7      }
 8      $.when(c()).then(function(k){
 9         console.log(k); //[1,2,3]
10      });

我了解deferred大概是这个样子了，能力封顶，欢迎吐槽和纠正错误。

转载于:https://www.cnblogs.com/belongto/p/8387588.html

谈谈JQuery的Deferred对象相关推荐

jQuery的deferred对象详解
阮一峰大神的关于jQuery的deferred对象详解 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
jQuery使用Deferred对象执行异步操作
在JQuery 1.5之前,Ajax仅支持一个回调函数,但在JQuery的1.5版本中,引入了 Deferred对象,它和ES6的Promise对象长的有点像,jQuery的Deferred对象也有r ...
jQuery中deferred对象的使用（二）
接上一回的内容,漏了一个always()方法,参数也是回调函数,与done和fail不同的是,无论任何情况都执行always方法中的回调. deferred对象的使用(二) deferred对象不光可 ...
jQuery的deferred对象深析
从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuer ...
jQuery中deferred对象详解
最近看看构建工具gulp,当看到promise时突然有点陌生,于是乎意外找到了大牛阮一峰的一篇文章,写的非常的通俗易懂,对延迟对象进行了很好的讲解,虽然写的比较早但是道理都一样. 以下为主要内容: 一 ...
jquery的deferred对象
1.$.Deferred 生成一个deferred对象. //var dtd = $.Deferred; 2.dtd.done()指定操作成功时的回调函数. 3.dtd.fail()指定操作成功时的 ...
JQuery：deferred对象的方法
为什么80%的码农都做不了架构师?>>> (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 ( ...
JQuery Deferred 对象
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html <jQu ...
jQuery.Deferred对象
概述 deferred对象是jQuery对Promises接口的实现.简单说,Promises是异步操作的通用接口,扮演代理人(proxy)的角色,将异步操作包装成具有同步操作特性的特殊对象.异步操作 ...

谈谈JQuery的Deferred对象

谈谈JQuery的Deferred对象相关推荐

最新文章

热门文章