jQuery中藉助deferred來請求及判斷AJAX載入的執行個體講解_jquery

ajax請求非同步隊列載入
我們在開發程式的時候通常會碰到使用ajax載入資料顯示到列表的情況。ajax預設使用非同步載入（async:true）。為什麼不使用同步呢，因為ajax同步載入會UI渲染線程阻塞的問題。通常表現為在載入大量資料時由於載入時間過長導致頁面不能點擊、gif動畫卡死以及瀏覽器崩潰等問題。所以，一般情況下，盡量使用ajax非同步載入。
可是，我們有些時候的需求要求ajax同步載入，一個載入完再載入下一個，即所謂的隊列。前面我們有說過，同步載入會引起UI渲染阻塞問題。那麼我們要怎麼實現順序載入而不引起該問題呢？
範例程式碼一：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(function(){ $("#clickBtn").on("click",function(){  getData(0,10);//輸出0-9 })})function getData(i,length){ $.ajax({  type:"post",  url:"setDeffer.php",  data:{   data:i  },  async:true,//非同步  success:function(data){   $("#showArea").text($("#showArea").text()+data+"\n");   if(i<length-1){    getData(i+1,length);   }  } });}</script>

PHP後台代碼：

<?php$str = $_POST["data"];sleep(1);//延遲1秒echo "輸出".$str;?>

當然，jquery也提供了我們deferred對象來解決回呼函數的問題。
範例程式碼二：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(function(){ $("#clickBtn").on("click",function(){  recycleData(0,10);//輸出0-9 })})function getData(i){ var defer = $.Deferred(); $.ajax({  type:"post",  url:"setDeffer.php",  data:{   data:i  },  async:true,//非同步  success:function(data){   $("#showArea").text($("#showArea").text()+data+"\n");   defer.resolve(data);  } }); return defer.promise();}function recycleData(i,length){ $.when(getData(i)).done(function(data){//這裡的data為defer在ajax儲存下來的資料  if(i<length-1){   recycleData(i+1,length);//遞迴  } })}</script>

這裡首先建立一個deffered對象，在ajax的success函數中將ajax返回的資料儲存在deffered對象中，然後返回deffered對象。這樣就保證了在下一次ajax請求的時候這個ajax已經請求完成。deferred對象的好處包括它允許你給一個事件自由添加多個回呼函數。或者給多個事件統一指定回呼函數。

用jquery的deferred對象實現判斷頁面中所有圖片載入完成
如果我們載入的是圖片，對於圖片是否載入完成，我們平時可以用監聽圖片load 方法來進行。今天主要介紹用jquery的deferred對象來進行判斷。
關於jquery的deferred對象，是jquery的重點和痛點。對於執行較長時間的函數，我們通常用deferred對象。
關於deferred對象，我在這裡稍微介紹一下$.when().then()

function successFunc(){ console.log( “success!” ); } function failureFunc(){ console.log( “failure!” ); } $.when( $.ajax( "/main.php" ), $.ajax( "/modules.php" ), $.ajax( “/lists.php” ) ).then( successFunc, failureFunc ); 

可以同時調用多個ajax,然後通過then來返回成功或者失敗。

或者

$.when($.ajax("test1.html"), $.ajax("test2.html")).done(function(){ alert("哈哈，成功了！"); }).fail(function(){ alert("出錯啦！"); });

我們回到正題來，用jquery的deferred對象實現判斷頁面中所有圖片載入完成

var defereds = []; //定義一個數組存放Deferred對象$imgs.each(function() { //imgs迴圈所有圖片  var dfd = $.Deferred();// 建立一個deferred對象  $(this).load(dfd.resolve());// 圖片載入完成之後，改變deferred對象的執行狀態  defereds.push(dfd);//push到數組中});$.when.apply(null, defereds).done(function() {  console.log('load compeleted');});

因為 $.when 支援的參數是 $.when(dfd1, dfd2, dfd3, ...)，所以我們這裡使用了 apply 來接受數組參數。

上面提到了apply(),又引申到了 在JS中,call()方法和apply()方法

我在這裡稍微介紹一下apply()

假如我們有prints函數：

function prints(a,b,c,d){    console.log(a+b+c+d);  }  function example(a,b,c,d){    prints.apply(this,[a,b,c,d]);  }  example("1","sd","wq","wqe") //輸出：1sdwqwqe

或者我們可以這麼寫：

prints.apply(null,["腳","本","之","家"]);//輸出：雲棲社區