Analisis mendalam kaedah deferred.promise() Deferred dalam jQuery_jquery

tertunda.janji() dan .janji()

Sintaks kedua-dua API ini hampir sama, tetapi terdapat perbezaan yang besar. deferred.promise() ialah kaedah Deferred instance, yang mengembalikan Deferred.Promise instance. Objek Deferred.Promise boleh difahami sebagai pandangan objek tertunda Ia hanya mengandungi set kaedah objek tertunda, termasuk: done(), then(), fail(), isResolved(), isRejected(), always() ,Kaedah ini hanya boleh melihat keadaan tertunda, tetapi tidak boleh mengubah keadaan dalaman objek tertunda. Ini sangat sesuai untuk enkapsulasi API. Sebagai contoh, pemegang objek tertunda boleh mengawal keadaan keadaan tertunda (diselesaikan atau ditolak) mengikut keperluannya sendiri, tetapi dia boleh mengembalikan objek Janji objek tertunda ini kepada pemerhati lain, dan pemerhati hanya boleh memerhati perubahan dalam keadaan Fungsi panggil balik yang sepadan, tetapi tidak boleh mengubah keadaan dalaman objek tertunda, dengan itu memberikan perlindungan pengasingan yang baik.

tertunda.janji()

$(function(){ 
  // 
  var deferred = $.Deferred(); 
  var promise = deferred.promise(); 
   
  var doSomething = function(promise) { 
    promise.done(function(){ 
      alert('deferred resolved.'); 
    }); 
  }; 
   
  deferred.resolve(); 
  doSomething(promise); 
}) 

deferred.promise() juga boleh menerima parameter objek Pada masa ini, objek masuk akan diberikan kepada kaedah Promise dan dikembalikan sebagai hasilnya.

// Existing object 
var obj = { 
 hello: function( name ) { 
  alert( "Hello " + name ); 
 } 
}, 
// Create a Deferred 
defer = $.Deferred(); 
 
// Set object as a promise 
defer.promise( obj ); 
 
// Resolve the deferred 
defer.resolve( "John" ); 
 
// Use the object as a Promise 
obj.done(function( name ) { 
 this.hello( name ); // will alert "Hello John" 
}).hello( "Karl" ); // will alert "Hello Karl" 

deferred.promise() hanya menghalang kod lain daripada menukar keadaan objek tertunda ini. Ia boleh difahami bahawa objek janji tertunda yang dikembalikan oleh kaedah deferred.promise() tidak mempunyai kaedah selesai, tolak, kemajuan, resolveWith, rejectWith, progressWith Anda hanya boleh menggunakan kaedah selesai, kemudian, gagal dan lain-lain kaedah untuk menambah pengendali Atau menilai status.

deferred.promise() tidak boleh mengubah keadaan objek tertunda, dan juga tidak memastikan bahawa keadaan semasa kekal tidak berubah. Ia hanya memastikan bahawa anda tidak boleh menukar keadaan objek tertunda melalui objek janji tertunda yang dikembalikan oleh tertunda. janji(). Jika kami terus mengembalikan dtd di sini, fungsi pemprosesan .done masih akan menunggu sehingga dtd.resolve() sebelum melaksanakannya.

Untuk contoh khusus dalam blog itu, jika kita menukar kod kepada bentuk berikut:

var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕！");
    dtd.resolve(); // 改变deferred对象的执行状态
  };
  setTimeout(tasks,5000);
  return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

Hasil pelaksanaan ini adalah sama dengan hasil pengembalian dtd.promise sebelum ini.

Apakah perbezaannya? Jika kita menukar kod $.when kepada ini:

var d = wait(dtd);
$.when(d)
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });
d.resolve();

Kami akan mendapati amaran("Haha, berjaya!") akan dilaksanakan serta-merta, tetapi "pelaksanaan selesai" akan mengambil masa 5 saat untuk muncul.

Tetapi jika fungsi tunggu kami akhirnya mengembalikan dtd.promise() di sini d.resolve() akan melaporkan ralat kerana objek d tidak mempunyai kaedah resolve().

Begitu juga jika kita menukar kod kepada:

var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd){
  var tasks = function(){
　　   alert("执行完毕！");
　　   dtd.resolve(); // 改变deferred对象的执行状态
　　 };
　　 setTimeout(tasks,5000);
　　 return dtd.promise();
};
dtd.resolve();
$.when( wait(dtd))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

Kami juga boleh mendapati amaran("Haha, berjaya!") akan dilaksanakan serta-merta, kerana objek tertunda dtd telah diselesaikan() sebelum diserahkan kepada menunggu, dan apabila objek tertunda diselesaikan atau ditolak, Status tidak akan berubah.

Kemudian kami menukar kod $.wait kepada:

$.when( wait(dtd))
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });
dtd.resolve();

Kami juga akan mendapati bahawa amaran("Haha, berjaya!"); dilaksanakan serta-merta Walaupun apabila tunggu(dtd) dilaksanakan, dtd belum diselesaikan, dan kaedah tunggu mengembalikan dtd.promise(). objek tertunda asal dtd terdedah kepada luar, dan kita masih boleh mengubah keadaannya dari luar.

Jadi, jika kita benar-benar tidak mahu kod lain mengubah keadaan objek tertunda dalam kaedah tunggu, maka kita harus menulisnya seperti ini:

var wait = function(){
  var dtd = $.Deferred(); // 新建一个deferred对象
  var tasks = function(){
    alert("执行完毕！");
　　   dtd.resolve(); // 改变deferred对象的执行状态
　　 };
　　 setTimeout(tasks,5000);
　　 return dtd.promise();
};
$.when( wait())
.done(function(){ alert("哈哈，成功了！"); })
.fail(function(){ alert("出错啦！"); });

Iaitu, jangan dedahkan tertunda secara langsung, dan akhirnya kembalikan deferred.promise(), supaya kod lain hanya boleh menambah pengendali.

.janji()

Pertama sekali, ini bukan kaedah kejadian Tertunda! Kaedah ini ialah kaedah contoh jQuery. Kaedah ini digunakan untuk mengembalikan objek Promise selepas satu set jenis tindakan (seperti animasi) selesai, untuk pendengar acara memantau statusnya dan melaksanakan fungsi pemprosesan yang sepadan.

Kaedah ini menerima dua parameter pilihan: .promise( [type,] [target] )

jenis: jenis baris gilir, nilai lalai ialah fx, fx ialah animasi objek jQuery
targetObject: objek yang akan diberikan kelakuan Promise,

Dua parameter ini adalah pilihan. Parameter pertama (saya) pada masa ini tidak mempunyai jenis nilai lain yang ditemui kecuali fx. Oleh itu, ia biasanya digunakan untuk memantau animasi dan melakukan beberapa operasi selepas animasi selesai.

Contoh: Mengembalikan secara langsung objek janji keadaan yang diselesaikan tanpa kesan animasi

var div = $( "<div />" ); 

div.promise().done(function( arg1 ) { 
 // 将会被马上触发 
 alert( this === div && arg1 === div ); 
}); 

Contoh: Cetuskan fungsi mendengar done() selepas semua kesan animasi selesai

<!DOCTYPE html> 
<html> 
<head> 
 <style> 
div { 
 height: 50px; width: 50px; 
 float: left; margin-right: 10px; 
 display: none; background-color: #090; 
} 
</style> 
 <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
  
<button>Go</button> 
<p>Ready...</p> 
<div></div> 
<div></div> 
<div></div> 
<div></div> 
<script> 
$("button").bind( "click", function() { 
 $("p").append( "Started..."); 
 //每个div执行动画效果 
 $("div").each(function( i ) { 
  $( this ).fadeIn().fadeOut( 1000 * (i+1) ); 
 }); 
 //$("div")包含一组div，在所有的div都完成自己的动画效果后触发done()函数 
 $( "div" ).promise().done(function() { 
  $( "p" ).append( " Finished! " ); 
 }); 
}); 
</script> 
 
</body> 
</html>