国产精品操,国产午夜福利精品久久不卡

本文和大家分享的主要是jquery中deferred對(duì)象相關(guān)內(nèi)容，一起來看看吧，希望對(duì)大家學(xué)習(xí)jquery有所幫助。
　　1、什么是deferred對(duì)象
　　開發(fā)網(wǎng)站的過程中，我們經(jīng)常遇到某些耗時(shí)很長的javascript操作。其中，既有異步的操作（比如 ajax 讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個(gè)大型數(shù)組），它們都不是立即能得到結(jié)果的。
　　通常的做法是，為它們指定回調(diào)函數(shù)（ callback ）。即事先規(guī)定，一旦它們運(yùn)行結(jié)束，應(yīng)該調(diào)用哪些函數(shù)。
　　但是，在回調(diào)函數(shù)方面，jQuery的功能非常弱。為了改變這一點(diǎn)，jQuery開發(fā)團(tuán)隊(duì)設(shè)計(jì)了deferred對(duì)象。
　　簡(jiǎn)單說，deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。在英語中，defer的意思是“延遲”，所以deferred對(duì)象的含義就是“延遲”到未來某個(gè)點(diǎn)再執(zhí)行。
　　它解決了如何處理耗時(shí)操作的問題，對(duì)那些操作提供了更好的控制，以及統(tǒng)一的編程接口。它的主要功能，可以歸結(jié)為四點(diǎn)。
　　2、ajax操作的鏈?zhǔn)綄懛?br> 　　首先，回顧一下jQuery的 ajax 操作的傳統(tǒng)寫法：
　　$.ajax({
　　url: 'test.html',
　　success: function () {
　　console.log('hahahsuccess~');
　　},
　　error: function () {
　　console.log('error!');
　　}
　　});
　　在上面的代碼中， $.ajax() 接受一個(gè)對(duì)象參數(shù)，這個(gè)對(duì)象包含兩個(gè)方法： success 方法指定操作成功后的回調(diào)函數(shù)， error 方法指定操作失敗后的回調(diào)函數(shù)。
　　$.ajax() 操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是 XHR 對(duì)象，將無法進(jìn)行鏈?zhǔn)讲僮?；如果高?.5.0版本，返回的是 deferred 對(duì)象，可以進(jìn)行鏈?zhǔn)讲僮鳌?br> 　　現(xiàn)在，新的寫法是這樣的：
　　$.ajax('test.html')
　　.done(function () {
　　console.log('hahahsuccess~');
　　})
　　.fail(function () {
　　console.log('error!');
　　})
　　可以看到， done() 相當(dāng)于 success 方法， fail() 相當(dāng)于 error 方法。采用鏈?zhǔn)綄懛ê螅?代碼的可讀性大大提高。
　　3、指定同一操作的多個(gè)回調(diào)函數(shù)
　　deferred對(duì)象的一大好處，就是它允許自由添加多個(gè)回調(diào)函數(shù) 。
　　還是以上面的代碼為例，如果 ajax 操作成功后，除了原來的回調(diào)函數(shù)，還想再運(yùn)行一個(gè)回調(diào)函數(shù)，怎么辦？
　　很簡(jiǎn)單，直接把它加在后面就行了。
　　$.ajax('test.html')
　　.done(function () {
　　console.log('hahahsuccess~');
　　})
　　.fail(function () {
　　console.log('error!')
　　})
　　.done(function () {
　　console.log('the 3rd callback~');
　　})
　　回調(diào)函數(shù)可以添加任意多個(gè)，它們按照添加順序執(zhí)行。
　　4、為多個(gè)操作指定回調(diào)函數(shù)
　　deferred對(duì)象的另一大好處，就是它允許為多個(gè)事件指定一個(gè)回調(diào)函數(shù) ，這是傳統(tǒng)寫法做不到的。
　　請(qǐng)看下面的代碼，它用到了一個(gè)新的方法 $.when() ：
　　$.when($.ajax('test1.html'), $.ajax('test2.html'))
　　.done(function () {
　　console.log('hahahsuccess~');
　　})
　　.fail(function () {
　　console.log('error!');
　　});
　　這段代碼的意思是，先執(zhí)行兩個(gè)操作 $.ajax('test1.html') 和 $.ajax(test2.html) ，如果都成功了，就運(yùn)行 done() 指定的回調(diào)函數(shù)，如果有一個(gè)失敗或都失敗了，就執(zhí)行 fail()指定的回調(diào)函數(shù)。
　　5、普通操作的回調(diào)函數(shù)接口（上）
　　deferred對(duì)象的最大優(yōu)點(diǎn)，就是它把這一套回調(diào)函數(shù)接口，從 ajax 操作擴(kuò)展到了所有操作。也就是說，任何一個(gè)操作——不管是 ajax 操作還是本地操作，不管是異步操作還是同步操作——都可以用deferred對(duì)象的回調(diào)方法，指定回調(diào)函數(shù)。
　　來看一個(gè)具體的例子，假定有一個(gè)很耗時(shí)的操作 wait ：
　　var wait = function () {
　　var tasks = function () {
　　console.log('執(zhí)行完畢');
　　};
　　setTimeout(tasks, 5000);
　　};
　　為它指定回調(diào)函數(shù)，應(yīng)該怎么做呢？
　　很自然的，會(huì)想到，可以使用 $.when()
　　$.when (wait())
　　.done (function () {
　　console.log('success~!');
　　})
　　.fail (function () {
　　console.log('error!');
　　})
　　但是，這樣寫的話， done() 方法會(huì)立即執(zhí)行，起不到回調(diào)函數(shù)的作用。原因在于 $.when()的參數(shù)只能是deferred對(duì)象，所以必須對(duì) wait() 進(jìn)行該寫。
　　var dtd = $.Deferred();var wait = function (dtd) {
　　var tasks = function () {
　　console.log('執(zhí)行完畢');
　　dtd.resolve();
　　}
　　setTimeout(tasks, 5000);
　　return dtd;
　　}
　　現(xiàn)在， wait() 函數(shù)返回的是deferred對(duì)象，這樣就可以加上鏈?zhǔn)讲僮髁恕?br> 　　$.when (wait(dtd))
　　.done (function () {
　　console.log('success~!');
　　})
　　.fail (function () {
　　console.log('error!');
　　})
　　wait() 函數(shù)運(yùn)行完，就會(huì)自動(dòng)運(yùn)行 done() 方法指定的回調(diào)函數(shù)。
　　6、deferred.resolve()方法和deferred.reject()方法
　　如果仔細(xì)看，會(huì)發(fā)現(xiàn)上面的 wait() 函數(shù)中，有一段代碼是 dtd.resolve() 。這段代碼的作用是什么？
　　要說清楚這個(gè)問題，就要引入一個(gè)新概念“ 執(zhí)行狀態(tài) ”。jQuery規(guī)定，deferred對(duì)象有三種執(zhí)行狀態(tài)—— 未完成、已完成和已失敗。如果執(zhí)行狀態(tài)時(shí) “已完成”（resolved），deferred對(duì)象立刻調(diào)用 done() 方法指定的回調(diào)函數(shù)；如果執(zhí)行狀態(tài)是 “已失敗” ，調(diào)用 fail() 方法指定的回調(diào)函數(shù)；如果執(zhí)行狀態(tài)是“未完成”，則繼續(xù)等待，或者調(diào)用 progress() 方法指定的回調(diào)函數(shù)。
　　前面部分的 ajax 操作時(shí)，deferred對(duì)象會(huì)根據(jù)返回結(jié)果，自動(dòng)改變自身的執(zhí)行狀態(tài)；但是，在 wait() 函數(shù)中，這個(gè)執(zhí)行狀態(tài)必須由程序員手動(dòng)指定。 dtd.resolve() 的意思是，將dtd 對(duì)象的執(zhí)行狀態(tài)從“未完成”改為“已失敗”，從而觸發(fā) fail() 方法。
　　var dtd = $.Deferred();var wait = function (dtd) {
　　var tasks = function() {
　　alert('執(zhí)行完畢！');
　　dtd.reject(); // 改變deferred對(duì)象的執(zhí)行狀態(tài)
　　};
　　setTimeout(tasks, 5000);
　　return dtd;
　　};
　　$.when(wait(dtd))
　　.done(function () {
　　alert('哈哈，成功了~！');
　　})
　　.fail(function () {
　　alert('出錯(cuò)啦！');
　　})
　　7、deferred.promise()方法
　　上面這種寫法，還是有問題。那就是 dtd 是一個(gè) 全局對(duì)象，所以它的執(zhí)行狀態(tài)可以從外部改變。
　　代碼如下。
　　var dtd = $.Deferred();var wait = function (dtd) {
　　var tasks = function () {
　　alert('執(zhí)行完畢！');
　　dtd.resolve();
　　};
　　setTimeout(tasks, 5000);
　　return dtd;
　　}
　　$.when(wait(dtd))
　　.done(function () {
　　alert('啊哈哈，成功了~');
　　})
　　.fail(function () {
　　alert('出錯(cuò)啦！');
　　})
　　dtd.resolve();
　　在代碼的尾部加了一行 dtd.resolve() ，這就改變了 dtd() 對(duì)象的執(zhí)行狀態(tài)，因此導(dǎo)致 done() 方法立刻執(zhí)行，跳出“哈哈哈成功了”的提示框，等5s之后再跳出“執(zhí)行完畢”的提示框。
　　為了避免這種情況，jQuery提供了deferred.promise()方法。它的作用是，在原來的deferred對(duì)象上返回另一個(gè)deferred對(duì)象，后者只開放與改變執(zhí)行狀態(tài)無關(guān)的方法（比如 .done() 方法和 .fail() 方法），屏蔽與改變執(zhí)行狀態(tài)有關(guān)的方法（比如 .resolve() 方法和 .reject()方法），從而使得執(zhí)行狀態(tài)不能改變。
　　代碼如下。
　　var wait = function (dtd) {
　　var tasks = function () {
　　alert('執(zhí)行完畢！');
　　dtd.resolve();
　　};
　　setTimeout(tasks, 5000);
　　return dtd.promise(); // 返回promise對(duì)象
　　};// 新建一個(gè)d對(duì)象，改為對(duì)這個(gè)對(duì)象進(jìn)行操作var d = wait(dtd);
　　$.when (d)
　　.done (function () {
　　alert('哈哈，成功了！');
　　})
　　.fail (function () {
　　alert('出錯(cuò)啦！');
　　})
　　d.resolve(); // 此時(shí)，這個(gè)語句是無效的
　　在上面的這段代碼中， wait() 函數(shù)返回的是 promise 對(duì)象。然后，我們把回調(diào)函數(shù)綁定在這個(gè)這個(gè)對(duì)象上面，而不是原來的deferred對(duì)象上面。這樣的好處是，無法改變這個(gè)對(duì)象的執(zhí)行狀態(tài)，要想改變執(zhí)行狀態(tài)，只能操作原來的deferred對(duì)象。
　　不過，更好的寫法是，將dtd對(duì)象變成 wait() 函數(shù)的內(nèi)部對(duì)象。
　　var wait = function (dtd) {
　　var dtd = $.Deferred();
　　var tasks = function () {
　　alert('執(zhí)行完畢！');
　　dtd.resolve();
　　}
　　setTimeout(tasks, 5000);
　　return dtd.promise();
　　};
　　$.when(wait())
　　.done(function () {
　　alert("哈哈，成功了");
　　})
　　.fail(function () {
　　alert("出錯(cuò)啦");
　　})
　　8、普通操作的回調(diào)函數(shù)接口（中）
　　另一種防止執(zhí)行狀態(tài)被外部改變的方法，是使用 deferred 對(duì)象的建構(gòu)函數(shù) $.Deferred()。
　　這時(shí)， wait 函數(shù)還是保持不變，我們直接把它傳入 $.Deferred() 。
　　$.Deferred(wait)
　　.done(function () {
　　alert('哈哈，成功啦');
　　})
　　.fail(function () {
　　alert('出錯(cuò)啦！');
　　})
　　jQuery規(guī)定， $.deferred() 可以接受一個(gè) 函數(shù)名（注意：是函數(shù)名）作為參數(shù)， $.Deferred() 所生成的deferred對(duì)象將作為這個(gè)函數(shù)的默認(rèn)參數(shù)。
　　9、普通操作的回調(diào)函數(shù)接口（下）
　　除了上面兩種方法意外，我們還可以直接在wait對(duì)象上部署deferred接口。
　　var dtd = $.Deferred();var wait = function (wait) {
　　var tasks = function () {
　　alert('執(zhí)行完畢！');
　　did.resolve();
　　};
　　setTimeout(tasks, 5000);
　　};
　　dtd.promise(wait);
　　wait.done(function () {
　　alert('哈哈，成功了！');
　　})
　　.fail(function () {
　　alert('出錯(cuò)啦！');
　　})
　　wait(dtd);
　　這里的關(guān)鍵是 dtd.promise(wait) 這一行，它的作用就是在 wait 對(duì)象上部署 Deferred接口，正因?yàn)橛辛诉@一行，后面才能直接在 wait 上面調(diào)用 done() 和 fail() 。
　　10、deferred對(duì)象的方法
　?。?） $.Deferred() 生成一個(gè) deferred 對(duì)象。
　　（2） deferred.done() 指定操作成功時(shí)的回調(diào)函數(shù)。
　?。?） deferred.fail() 指定操作失敗時(shí)的回調(diào)函數(shù)。
　?。?） deferred.promise() 沒有參數(shù)時(shí)，返回一個(gè)新的deferred對(duì)象，該對(duì)象的運(yùn)行狀態(tài)無法被改變；接受參數(shù)時(shí)，作用為在參數(shù)對(duì)象上部署deferred接口。
　?。?） deferred.resolve() 手動(dòng)改變deferred對(duì)象的運(yùn)行狀態(tài)為"已完成"，從而立即觸發(fā)done()方法。
　　（6） deferred.reject() 這個(gè)方法與deferred.resolve()正好相反，調(diào)用后將deferred對(duì)象的運(yùn)行狀態(tài)變?yōu)?已失敗"，從而立即觸發(fā)fail()方法。
　?。?） $.when() 為多個(gè)操作指定回調(diào)函數(shù)。
　?。?）deferred.then()有時(shí)為了省事，可以把done()和fail()合在一起寫，這就是then()方法。
　　$.when($.ajax( "/main.php" ))
　　.then(successFunc, failureFunc );
　　如果then()有兩個(gè)參數(shù)，那么第一個(gè)參數(shù)是done()方法的回調(diào)函數(shù)，第二個(gè)參數(shù)是fail()方法的回調(diào)方法。如果then()只有一個(gè)參數(shù)，那么等同于done()。
　?。?） deferred.always() 這個(gè)方法也是用來指定回調(diào)函數(shù)的，它的作用是，不管調(diào)用的是deferred.resolve()還是deferred.reject()，最后總是執(zhí)行。
　　$.ajax( "test.html" )
　　.always( function() {
　　alert("已執(zhí)行！");
　　});

來源：簡(jiǎn)書

Jquery學(xué)習(xí)之deferred對(duì)象的使用

熱門帖子

Swift 教程

最新帖子

Xcode 9.4下載