谈谈jquery的deferred对象

belongto belongto     2022-10-13     765

关键词:

最近一个变态的项目,一个页面只含编辑器且有下载功能,大概含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大概是这个样子了,能力封顶,欢迎吐槽和纠正错误。

jquery.deferred对象

目录概述deferred对象的方法基本用法notify()和progress()then方法pipe方法与PromiseA+规格的差异promise对象辅助方法$.when()方法使用实例wait方法改写setTimeout自定义操作使用deferred接口参考链接概述deferred对象代表了将要完成的某种操作,... 查看详情

jquery.deferred对象

JavaScript标准参考教程(alpha)jQueryjQuery.Deferred对象GitHub TOP jQuery.Deferred对象来自《JavaScript标准参考教程(alpha)》,by阮一峰目录概述deferred对象的方法基本用法notify()和progress()then方法pipe方法与PromiseA+规格的差异promise对... 查看详情

deferred

上文中提到了Promise构造函数,就不得不提deferred(延迟)对象了,其实,让deferred对象得到推广的便是其在jQuery中的使用,本文就jQuery中对deferred对象的使用进行探讨。延迟对象,在jQuery的1.5引入,是通过调用jQuery.Deferred()方法创... 查看详情

jquery的defer

deferred.promise()和.promise()这两个API语法几乎一样,但是有着很大的差别。deferred.promise()是Deferred实例的一个方法,他返回一个Deferred.Promise实例。一个Deferred.Promise对象可以理解为是deferred对象的一个视图,它只包含deferred对象的一组... 查看详情

jquery中的deferred之deferred对象

案例:vardef=$.Deferred();console.log(def);//答案见图1 图1:deferred就是一个有这些方法的对象。看源码分析:Deferred:function(func){vartuples=[//action,addlistener,listenerlist,finalstate["resolve","done",jQuery.Callbacks("on 查看详情

jquery的deferred对象详解

一、什么是deferred对象?开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。通常的... 查看详情

deferred对象和promise对象

个人认为阮一峰老师讲的关于deferred对象是最容易理解的。deferred对象是jquery的回调函数解决方案。解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。deferred对象的功能:1.将ajax操作改为链式... 查看详情

jquery中deferred的对象使用

什么是deferred对象    开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。&n... 查看详情

什么是deferred对象

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery1.5.0版本开始引入的一个新功能----deferred对象。这个功能很重要,未来将成为jQuery的核心方法,... 查看详情

deferred对象

转载,原文连接:http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery1.5.... 查看详情

jquery源码02--(3043,3183)deferred:延迟对象:对异步的统一管理

//延迟对象jQuery.extend({Deferred:function(func){vartuples=[//resolve完成、reject未完成、notify进行中类似于fire,done、fail、progress回调函数的方法类似于add,jQuery.Callbacks()创建回调对象实现回调方法。映射数组。//action,addlistener,listenerlist,fin 查看详情

jquery中的deferred(代码片段)

熟悉的东西,长时间不用很快也就忘了,挺多还蛮可惜的。。deferred之前用过不少次,这次心血来潮总结一下,主要还是参考阮老师的这篇文章。deferred对象被jquery推出,作为操作回调的一种方式。譬如ajax请求,如果想在请求成... 查看详情

jquery的延迟对象

之前看别人的demo,发现在延迟对象被resolve时要执行的代码,有时会写在deferred.then方法里执行,有时会写在deferred.done方法里执行。这让对延迟对象一知半解的我非常困惑,今天抽时间研究了一下下,发现:在某种环境下,两个... 查看详情

jquery的延迟对象

之前看别人的demo,发现在延迟对象被resolve时要执行的代码,有时会写在deferred.then方法里执行,有时会写在deferred.done方法里执行。这让对延迟对象一知半解的我非常困惑,今天抽时间研究了一下下,发现:在某种环境下,两个... 查看详情

jQuery Deferred:具有多个对象的 $.when()

】jQueryDeferred:具有多个对象的$.when()【英文标题】:jQueryDeferred:$.when()withmultipleobjects【发布时间】:2013-07-0920:07:03【问题描述】:我需要一种通过回调获取不同脚本的方法。这个方法没问题:fetchScripts:function()var_this=this;$.when($.a... 查看详情

*jquery系列-deferred对象

      参考【1】阮一峰 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html 查看详情

jquery的2.0.3版本源码系列:3043行-3183行,deferred延迟对象,对异步的统一管理

目录part1deferred延迟对象part2 when辅助方法网盘源代码 链接:https://pan.baidu.com/s/1skAj8Jj密码:iztapart1deferred延迟对象1.deferred基于callbacks开发使用callbacks完成异步:<scriptsrc="js/jquery-2.0.3.js"></script> 查看详情

对deferred(延迟对象)的理解

deferred对象从jQuery1.5.0开始引入什么是defrred对象    开发网站过程中,我们经常遇到某些耗时长的JS操作,其中,既有异步操作(如Ajax读取服务器数据),也有同步的操作(如遍历一个大型数组),它们都不能立即得到结果。通常... 查看详情