jQuery基础之Deferred对象

2024-06-22 17:48

本文主要是介绍jQuery基础之Deferred对象,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1 Deferred对象概述

2 Deferred对象的方法

2.1 基本用法

2.1.1 生成Deferred对象

2.1.2 deferred对象的状态

2.1.3 改变状态的方法

2.1.4 绑定回调函数

2.2 notify() 和 progress()

2.3 then方法

2.3.1 概述

2.3.2 返回值

2.3.3 对返回值的修改

2.3.4 回调函数的返回值

2.4 pipe方法

2.5 与Promise A+规格的差异

3 promise对象

3.1 概念

3.2 生成promise对象

4 Deferred对象的辅助方法

4.1 $.when()方法

5 使用实例

5.1 wait方法

5.2 改写setTimeout

5.3 自定义操作使用deferred接口


1 Deferred对象概述

deferred对象代表了将要完成的某种操作,并提供了一些方法,帮助用户使用。它是jQuery对Promises接口的实现。jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象。

简单说,Promises是异步操作的通用接口,扮演代理人(proxy)的角色,将异步操作包装成具有同步操作特性的特殊对象。异步操作的典型例子就是Ajax操作、网页动画、web worker等等。

由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待。为了避免整个程序失去响应,通常的解决方法是将那些排在后面的操作,写成“回调函数”(callback)的形式。这样做虽然可以解决问题,但是有一些显著缺点:

  • 回调函数往往写成函数参数的形式,形成所谓的“持续传递风格”(即参数就是下一步操作,Continuation-passing style),导致函数的输入和输出非常混乱,整个程序的可阅读性差;
  • 回调函数往往只能指定一个,如果有多个操作,就需要改写回调函数。
  • 除了正常的报错机制,错误还可能通过回调函数的形式返回,增加了除错和调试的难度。
  • 正常的函数输入和输出可以区分得很清楚,回调函数使得函数的输出不再重要。

JavaScript高级语法之异步Promise(1:入门)

JavaScript高级语法之异步Promise(2:深入)

Promises就是为了解决这些问题而提出的,它的主要目的就是取代回调函数,成为非同步操作的解决方案。它的核心思想就是让非同步操作返回一个对象,其他操作都针对这个对象来完成。比如,假定ajax操作返回一个Promise对象。

var promise = $.get('http://www.example.com');

然后,Promise对象有一个then方法,可以用来指定回调函数。一旦非同步操作完成,就调用指定的回调函数。

promise.then(function (content) {console.log(content)
})

可以将上面两段代码合并起来,这样程序的流程看得更清楚。

$.get('http://www.example.com').then(function (content) {console.log(content)
})

在1.7版之前,jQuery的Ajax操作采用回调函数。

$.ajax({url:"/echo/json/",success: function(response){console.info(response.name);}
});

1.7版之后,Ajax操作直接返回Promise对象,这意味着可以用then方法指定回调函数。

$.ajax({url: "/echo/json/",
}).then(function (response) {console.info(response.name);
});

2 Deferred对象的方法

2.1 基本用法

2.1.1 生成Deferred对象

第一步是通过$.Deferred()方法,生成一个deferred对象。

var deferred = $.Deferred();

2.1.2 deferred对象的状态

deferred对象有三种状态。

  • pending:表示操作还没有完成。
  • resolved:表示操作成功。
  • rejected:表示操作失败。

state方法用来返回deferred对象当前状态。

$.Deferred().state() // 'pending'
$.Deferred().resolve().state() // 'resolved'
$.Deferred().reject().state() // 'rejected'

2.1.3 改变状态的方法

resolve方法将deferred对象的状态从pending改为resolved,reject方法则将状态从pending改为rejected。

var deferred = $.Deferred();deferred.resolve("hello world");

resolve方法的参数,用来传递给回调函数。

2.1.4 绑定回调函数

deferred对象在状态改变时,会触发回调函数。

done方法指定状态变为resolved(操作成功)时的回调函数;fail方法指定状态变为rejected(操作失败)时的回调函数;always方法指定,不管状态变为resolved或rejected,都会触发的方法

var deferred = $.Deferred();deferred.done(function(value) {console.log(value);
}).resolve('hello world');
// hello world

上述三种方法都返回的原有的deferred对象,因此可以采用链式写法,在后面再链接别的方法(包括done和fail在内)。

$.Deferred().done(f1).fail(f2).always(f3);

2.2 notify() 和 progress()

progress()用来指定一个回调函数,当调用notify()方法时,该回调函数将执行。它的用意是提供一个接口,使得在非同步操作执行过程中,可以执行某些操作,比如定期返回进度条的进度。

    var userProgress = $.Deferred();var $profileFields = $("input");var totalFields = $profileFields.lengthuserProgress.progress(function (filledFields) {var pctComplete = (filledFields/totalFields)*100;$("#progress").html(pctComplete.toFixed(0));}); userProgress.done(function () {$("#thanks").html("Thanks for completing your profile!").show();});$("input").on("change", function () {var filledFields = $profileFields.filter("[value!='']").length;userProgress.notify(filledFields);if (filledFields == totalFields) {userProgress.resolve();}});

2.3 then方法

2.3.1 概述

then方法的作用也是指定回调函数,它可以接受三个参数,也就是三个回调函数。第一个参数是resolve时调用的回调函数(相当于done方法),第二个参数是reject时调用的回调函数(相当于fail方法),第三个参数是progress()方法调用的回调函数

deferred.then( doneFilter [, failFilter ] [, progressFilter ] )

2.3.2 返回值

在jQuery 1.8之前,then()只是.done().fail()写法的语法糖,两种写法是等价的。在jQuery 1.8之后,then()返回一个新的promise对象,而done()返回的是原有的deferred对象。如果then()指定的回调函数有返回值,该返回值会作为参数,传入后面的回调函数。

var defer = jQuery.Deferred();defer.done(function(a,b){return a * b;
}).done(function( result ) {console.log("result = " + result);
}).then(function( a, b ) {return a * b;
}).done(function( result ) {console.log("result = " + result);
}).then(function( a, b ) {return a * b;
}).done(function( result ) {console.log("result = " + result);
});defer.resolve( 2, 3 );

在jQuery 1.8版本之前,上面代码的结果是:

result = 2 
result = 2 
result = 2

在jQuery 1.8版本之后,返回结果是

result = 2 
result = 6 
result = NaN

对于jQuery 1.8之后不同结果的主要原因是:

deferred.done() 函数当Deferred(延迟)对象被受理时,该方法接受一个或者多个参数。deferred.done() 返回的是一个 Deferred 对象, 可以连接其他的延迟对象方法,包括额外的 .done() 方法。当Deferred 对象得到解决时,回调函数按它们被添加时的顺序执行,并且可以作为参数传递给如下的方法使用:resolve,resolveWith。

这说明,当调用done()方法时,不管这个方法返回什么,都是deferred对象,不要受done()方法中的return影响,由于是deferred对象那么当在调用下一个done()方法时,是不会受上一个done()方法影响的,需要注意的是:当在调用then方法返回Promise对象时,它对下一个done或者then方法就有影响了,如果then返回的是promise对象那么下一个done或者then就是它的resolve方法,如果then返回的不是Promise对象比如字符串之类的,那么就作为参数传给下一个done或者then方法了

 

这一点需要特别引起注意。

$.ajax( url1, { dataType: "json" } )
.then(function( data ) {return $.ajax( url2, { data: { user: data.userId } } );
}).done(function( data ) {// 从url2获取的数据
});

上面代码最后那个done方法,处理的是从url2获取的数据,而不是从url1获取的数据。

2.3.3 对返回值的修改

利用then()会修改返回值这个特性,我们可以在调用其他回调函数之前,对前一步操作返回的值进行处理。

var post = $.post("/echo/json/").then(function(p){return p.firstName;});post.done(function(r){ console.log(r); });

上面代码先使用then()方法,从返回的数据中取出所需要的字段(firstName),所以后面的操作就可以只处理这个字段了。

有时,Ajax操作返回json字符串里面有一个error属性,表示发生错误。这个时候,传统的方法只能是通过done()来判断是否发生错误。通过then()方法,可以让deferred对象调用fail()方法。

var myDeferred = $.post('/echo/json/', {json:JSON.stringify({'error':true})}).then(function (response) {if (response.error) {return $.Deferred().reject(response);}return response;},function () {return $.Deferred().reject({error:true});});myDeferred.done(function (response) {$("#status").html("Success!");}).fail(function (response) {$("#status").html("An error occurred");});

上面代码中,不管是通信出错,或者服务器返回一个错误,都会调用reject方法,返回一个新的deferred对象,状态为rejected,因此就会触发fail方法指定的回调函数。

关于error的处理,jQuery的deferred对象与其他实现Promises规范的函数库有一个重大不同。就是说,如果deferred对象执行过程中,抛出一个非Promises对象的错误,那么将不会被后继的then方法指定的rejected回调函数捕获,而会一直传播到应用程序层面。为了代码行为与Promises规范保持一致,建议出错时,总是使用reject方法返回错误。

d = $.Deferred()  
d.then(function(){  throw new Error('err')
}).fail(function(){console.log('fail')
})
d.resolve()
// Error: err

上面代码中,then的回调函数抛出一个错误,按照Promises规范,应该被fail方法的回调函数捕获,但是jQuery的部署是上升到应用程序的层面。

2.3.4 回调函数的返回值

如果回调函数返回deferred对象,则then方法的返回值将是对应这个返回值的promise对象

var d1 = $.Deferred();var promise = $.when('Hello').then(function(h){  return $.when(h,d1);
})promise.done(function (s1,s2) {console.log(s1);console.log(s2);
})d1.resolve('World')
// Hello
// World

上面代码中,done方法的回调函数,正常情况下只能接受一个参数。但是由于then方法的回调函数,返回一个when方法生成的deferred对象,导致它可以接受两个参数。

2.4 pipe方法

pipe方法接受一个函数作为参数,表示在调用then方法、done方法、fail方法、always方法指定的回调函数之前,先运行pipe方法指定的回调函数。它通常用来对服务器返回的数据做初步处理。

2.5 与Promise A+规格的差异

Promise事实上的标准是社区提出的Promise A+规格,jQuery的实现并不完全符合Promise A+,主要是对错误的处理。

var promise2 = promise1.then(function () {throw new Error("boom!");
});

上面代码在回调函数中抛出一个错误,Promise A+规定此时Promise实例的状态变为reject,该错误被下一个catch方法指定的回调函数捕获。但是,jQuery的Deferred对象此时不会改变状态,亦不会触发回调函数,该错误一般情况下会被window.onerror捕获。换句话说,在Deferred对象中,总是必须使用reject方法来改变状态。

3 promise对象

3.1 概念

一般情况下,从外部改变第三方完成的异步操作(比如Ajax)的状态是毫无意义的。为了防止用户这样做,可以在deferred对象的基础上,返回一个针对它的promise对象。

简单说,promise对象就是不能改变状态的deferred对象,也就是deferred的只读版。或者更通俗地理解成,promise是一个对将要完成的任务的承诺,排除了其他人破坏这个承诺的可能性,只能等待承诺方给出结果。

你可以通过promise对象,为原始的deferred对象添加回调函数,查询它的状态,但是无法改变它的状态,也就是说promise对象不允许你调用resolve和reject方法。

3.2 生成promise对象

deferred对象的promise方法,用来生成对应的promise对象。

function getPromise(){return $.Deferred().promise();
}try{getPromise().resolve("a");
} catch(err) {console.log(err);
}
// TypeError

上面代码对promise对象,调用resolve方法,结果报错。

jQuery的ajax()方法返回的就是一个Promise对象。此外,Animation类操作也可以使用promise方法。

$('body').toggle('blinds').promise().then(function(){$('body').toggle('blinds')}
)

4 Deferred对象的辅助方法

deferred对象还有一系列辅助方法,使它更方便使用。

4.1 $.when()方法

$.when()接受多个deferred对象作为参数,当它们全部运行成功后,才调用resolved状态的回调函数,但只要其中有一个失败,就调用rejected状态的回调函数。它相当于将多个非同步操作,合并成一个。实质上,when方法为多个deferred对象,返回一个单一的promise对象。

$.when($.ajax( "/main.php" ),$.ajax( "/modules.php" ),$.ajax( "/lists.php" )
).then(successFunc, failureFunc);

上面代码表示,要等到三个ajax操作都结束以后,才执行then方法指定的回调函数。

when方法里面要执行多少个操作,回调函数就有多少个参数,对应前面每一个操作的返回结果。

$.when($.ajax( "/main.php" ),$.ajax( "/modules.php" ),$.ajax( "/lists.php" )
).then(function (resp1, resp2, resp3){console.log(resp1);console.log(resp2);console.log(resp3);
});

上面代码的回调函数有三个参数,resp1、resp2和resp3,依次对应前面三个ajax操作的返回结果。

如果when方法的参数不是deferred或promise对象,则直接作为回调函数的参数

d = $.Deferred()  
$.when(d, 'World').done(function (s1, s2){console.log(s1);console.log(s2);
})d.resolve('Hello') 
// Hello 
// World

上面代码中,when的第二个参数是一个字符串,则直接作为回调函数的第二个参数。

此外,如果when方法的参数都不是deferred或promise对象,那么when方法的回调函数将立即运行。

5 使用实例

5.1 wait方法

我们可以用deferred对象写一个wait方法,表示等待多少毫秒后再执行。

$.wait = function(time) {return $.Deferred(function(dfd) {setTimeout(dfd.resolve, time);});
}

使用方法如下。

$.wait(5000).then(function() {console.log("Hello from the future!");
});

5.2 改写setTimeout

在上面的wait方法的基础上,还可以改写setTimeout方法,让其返回一个deferred对象。

function doSomethingLater(fn, time) {var dfd = $.Deferred();setTimeout(function() {dfd.resolve(fn());}, time || 0);return dfd.promise();
}var promise = doSomethingLater(function (){console.log( '已经延迟执行' );
}, 100);

5.3 自定义操作使用deferred接口

我们可以利用deferred接口,使得任意操作都可以用done()和fail()指定回调函数。

Twitter = {search:function(query) {var dfd = $.Deferred();$.ajax({url:"http://search.twitter.com/search.json",data:{q:query},dataType:'jsonp',success:dfd.resolve});return dfd.promise();}
}

使用方法如下。

Twitter.search('javaScript').then(function(data) {alert(data.results[0].text);
});

deferred对象的另一个优势是可以附加多个回调函数。下面的例子使用了上面所改写的setTimeout函数。

function doSomething(arg) {var dfd = $.Deferred();setTimeout(function() {dfd.reject("Sorry, something went wrong.");});return dfd;
}doSomething("uh oh").done(function() {console.log("Won't happen, we're erroring here!");
}).fail(function(message) {console.log(message);
});

 

这篇关于jQuery基础之Deferred对象的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1084985

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

在java中如何将inputStream对象转换为File对象(不生成本地文件)

《在java中如何将inputStream对象转换为File对象(不生成本地文件)》:本文主要介绍在java中如何将inputStream对象转换为File对象(不生成本地文件),具有很好的参考价... 目录需求说明问题解决总结需求说明在后端中通过POI生成Excel文件流,将输出流(outputStre

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js