Rumah > hujung hadapan web > tutorial js > Ambil objek $.Deferred dalam jQuery sebagai contoh untuk menerangkan cara objek janji mengendalikan isu_jquery tak segerak

Ambil objek $.Deferred dalam jQuery sebagai contoh untuk menerangkan cara objek janji mengendalikan isu_jquery tak segerak

WBOY
Lepaskan: 2016-05-16 15:32:30
asal
1331 orang telah melayarinya

Promises ialah abstraksi yang menjadikan kelakuan tak segerak kod lebih elegan Ia berkemungkinan menjadi paradigma pengaturcaraan JavaScript yang seterusnya mewakili hasil tugasan, tidak kira sama ada tugasan itu selesai atau tidak.

Sesetengah pelayar moden sudah menyediakan objek Promise asli, yang mengikut piawaian Promise/A. Dalam jQuery1.5, $.Deferred (yang boleh ditukar menjadi objek janji) disediakan. Banyak rangka kerja yang terkenal juga menyediakan objek janji. Objek janji sudah menjadi corak yang sangat penting dalam JavaScript Keanggunan yang ditunjukkan dalam menyelesaikan masalah tak segerak adalah apa yang diperlukan oleh JavaScript. Mari kita ambil objek $.Deferred dalam jQuery sebagai contoh untuk melihat cara objek promise mengendalikan isu tak segerak. Berkenaan objek $.Deferred, anda boleh menyemaknya di laman web rasmi jQuery, jadi saya tidak akan pergi ke butiran di sini.

1. Mengekapsulkan operasi tak segerak

Mula-mula, mari ambil gambar sebagai contoh dan lihat kod berikut:

//加载图片函数
var loadImg = function(url){
  var img = new Image() , deferred = $.Deferred() ;
 img.src = url ;
 img.onload = function(){
  //成功则触发deferred.resolve
    deferred.resolve( this ) ;
 } ;
 img.onerror = function(e){
    //失败则触发deferred.reject
  deferred.reject( e );
 } ;
  //返回promise对象
 return deferred.promise() ;
} ;
//请求图片
var request = loadImg('http://r2.ykimg.com/0515000054AFFC2D6737B343930AFAD6') ;
//请求成功
request.done(function(img){
  //code
}) ;
//可以注册多个回调,当请求成功时,会按注册的顺序执行,fail和always也有此性质
request.done(function(img){
  // code
});
//请求失败
request.fail(function(){
  // code
}) ;
//请求完毕
request.always(function(){
  //code
});
Salin selepas log masuk

Dalam kod di atas, saya merangkumkan operasi pemuatan imej, mewakilkannya kepada $.Ditangguhkan, dan akhirnya menjana janji untuk kembali. Menggunakan kaedah ini adalah lebih bersih dan jelas daripada menggunakan panggilan balik yang terdedah secara luaran. Satu lagi sebab yang lebih penting untuk melakukan ini ialah sambungan janji.

2. Janji sambungan

Mari kita ambil kod untuk memuatkan imej di atas sebagai contoh untuk melihat cara menyambung janji Lihat kod berikut:

var request = loadImg('http://b1.hucdn.com/upload/item/1411/13/89613257775992_800x800.jpg') ;
request.done(function(img){
  //code
}) ;
//request连接别的promise之后返回的promise
var request3 = request.then(function(img){
  //request执行成功时 连接request1
  var request1 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
  return request1 ;
},function(e){
  //request执行失败时 连接request2
  var request2 = loadImg('http://b1.hucdn.com/upload/item/1410/19/29492535741725_800x800.jpg') ;
  return request2 ;
});
//request执行并且request1或request2成功执行时
request3.done(function(done){
  //code
}) ;
Salin selepas log masuk

Objek promise menyediakan kaedah kemudian, yang menerima dua panggilan balik: onResolve dan onReject Dengan mengembalikan janji dalam panggilan balik, sambungan antara janji boleh diselesaikan. Dengan cara ini, operasi tak segerak boleh dilaksanakan secara bersiri.

Pada masa yang sama, jQuery juga menyediakan kaedah sambungan lain, lihat kod:

var request = loadImg('http://b1.hucdn.com/upload/item/1412/23/48188827139381_800x800.jpg') ;
var request1 = loadImg('http://b1.hucdn.com/upload/item/1412/06/50258594673502_800x800.jpg') ;
//通过$.when连接promise
var request2 = $.when(request,request1) ;
request2.done(function(img,img){
  //code
}) ;
Salin selepas log masuk

jQuery menyediakan fungsi $.when, yang boleh menerima n objek janji sebagai parameter Ia menghubungkan hasil pelaksanaan janji bersama-sama. Menggunakan pendekatan ini, berbilang operasi tak segerak boleh dilaksanakan secara selari.

3. Pengakhiran

Kod di sini mengambil memuatkan imej sebagai contoh Pendekatan yang sama boleh digunakan pada operasi tak segerak yang lain. Sebagai contoh, $.ajax dan $.fn.animate dalam jQuery, memanggil mereka mengembalikan janji. Di bahagian nod, beberapa operasi tak segerak (membaca pangkalan data, membaca fail, dll.) juga boleh dirangkumkan ke dalam janji. Kemudian laksanakan operasi gabungan pada berbilang janji untuk melaksanakannya secara bersiri atau selari.

Lampiran: objek tertunda

Selain digunakan untuk menukar objek janji, tertunda sendiri juga merupakan objek yang sangat berguna. Selain menyediakan kaedah dan sifat seperti objek janji, ia juga mempunyai fungsi pemberitahuan dan fungsi kemajuan Kedua-dua fungsi ini sangat berguna apabila melaksanakan bar kemajuan dan aliran air terjun.

Apabila melaksanakan bar kemajuan, fungsi penyelesaian dan selesai boleh digunakan untuk menentukan pemasaan pencetus dan logik pencetus apabila bar kemajuan dibaca hingga 100%. masa bar kemajuan semasa membaca logik. Fungsi tolak dan gagal boleh digunakan untuk menentukan pemasaan pencetus dan logik pencetus apabila bacaan kemajuan gagal.

Apabila melaksanakan aliran air terjun, fungsi penyelesaian dan selesai boleh digunakan untuk menentukan pemasaan pencetus dan logik pencetus apabila semua data telah dimuatkan ke dalam halaman Fungsi pemberitahuan dan kemajuan boleh digunakan untuk menentukan masa pencetus dan masa pencetus untuk aliran air terjun membaca halaman seterusnya.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan