谈谈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

时间: 2024-08-27 18:05:47

谈谈JQuery的Deferred对象的相关文章

jquery的Deferred 对象初体验

之前阅读了阮一峰老师的jQuery的deferred对象详解一文,结合jquery手册,算是对Deferred对象有了初步的认知.今天便来分享一下我自己的一些体会. 一.deferred可以方便的添加回调 先来看下面的例子 1 var test = function(callback) { 2 setTimeout(function() { 3 console.log('我完成了'); 4 callback('我是回调') 5 }, 1000) 6 }; 7 test(function(text

jQuery的deferred对象

今天学习jQuery API的时候看到deferred部分,以前也没有接触使用过,看的毫无头绪,于是找资料学习了一番. deferred对象代表了将要完成的某种操作,并提供了一些方法,帮助用户使用.它是jQuery对Promises接口的实现.由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待.为了避免整个程序失去响应,通常的解决方法是将那些排在后面的操作,写成“回调函数”(callback)的形式.这样做虽然可以解决问题,但是有一些显著缺点: 回调函数往往写成函

jQuery的deferred对象详解(转)

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

jQuery的deferred对象详解(转)

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

jQuery的deferred对象详解(一)

最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面阐述deferred讲的非常清楚,也让我大彻大悟,为了以后能很好的查阅,现将阮老师的文字转载过来. 一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即

【转载】学习资料存档:jQuery的deferred对象详解

我在以前的文章里提到promise和deferred,这两个东西其实是对回调函数的一种写法,javascript的难点之一是回调函数,但是我们要写出优秀的javascript代码又不得不灵活运用回调函数,大型javascript代码里都会大量运用回调函数,大量的标准回调函数写法的坏处就是使得代码的阅读性和可维护性降低,因此出现了promise模式和大量deferred库,jQuery很优秀,但是jQuery早期的版本对优雅回调写法的支持远远不够,直到jQuery1.5引入了deferred后,这

jQuery的deferred对象详解

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

转载:jQuery的deferred对象详解

一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的. 通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结束,应该调用哪些函数. 但是,在回调函数方面,jQuery的功能非常弱.为了改变这一点,jQuery开发团队就设计了deferred对象. 简单说,deferred对象就是jQuery的回调函数

jQuery之Deferred对象

Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单工厂模式. 它用来解决JS中的异步编程,它遵循 Common Promise/A 规范.实现此规范的还有 when.js 和 dojo. $.Deferred作为新特性首次出现在版本1.5中,这个版本利用Deferred又完全重写了Ajax模块. $.Deferred在jQuery代码自身四处被使用,分别是promise方法.DOM ready.Ajax模块.动画模块. 这里以版本1.8.3分析,由于1.7后$.