zoukankan      html  css  js  c++  java
  • 谈谈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大概是这个样子了,能力封顶,欢迎吐槽和纠正错误。

  • 相关阅读:
    python库安装
    Reversing Linked List(根据输入序列对其做部分或全部反转)
    简单的一元二项(使用的是指针形式,方便调试)
    最大子序列问题
    centos6安装mysql5.5.53
    android中常用的drawable
    android四大组件之ContentProvider
    android使用shape来绘制控件
    android布局理解
    android命令行管理avd以及sqlite3命令
  • 原文地址:https://www.cnblogs.com/belongto/p/8387588.html
Copyright © 2011-2022 走看看