deferred對象的延遲功能對jQuery的ajax操作是一個很大的幫助,尤其是回調(diào)控制,下面我們就來看一下對jQuery中借助deferred來請求及判斷AJAX加載的實例講解

ajax請求異步隊列加載

我們在開發(fā)程序的時候通常會碰到使用ajax加載數(shù)據(jù)顯示到列表的情況。ajax默認使用異步加載（async:true）。為什么不使用同步呢，因為ajax同步加載會UI渲染線程阻塞的問題。通常表現(xiàn)為在加載大量數(shù)據(jù)時由于加載時間過長導(dǎo)致頁面不能點擊、gif動畫卡死以及瀏覽器崩潰等問題。所以，一般情況下，盡量使用ajax異步加載。

可是，我們有些時候的需求要求ajax同步加載，一個加載完再加載下一個，即所謂的隊列。前面我們有說過，同步加載會引起UI渲染阻塞問題。那么我們要怎么實現(xiàn)順序加載而不引起該問題呢？

示例代碼一：

<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對象來解決回調(diào)函數(shù)的問題。

示例代碼二：

<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保存下來的數(shù)據(jù)

  if(i<length-1){

   recycleData(i+1,length);//遞歸

  }

 })

}

</script>

這里首先創(chuàng)建一個deffered對象，在ajax的success函數(shù)中將ajax返回的數(shù)據(jù)保存在deffered對象中，然后返回deffered對象。這樣就保證了在下一次ajax請求的時候這個ajax已經(jīng)請求完成。deferred對象的好處包括它允許你給一個事件自由添加多個回調(diào)函數(shù)?；蛘呓o多個事件統(tǒng)一指定回調(diào)函數(shù)。

用jquery的deferred對象實現(xiàn)判斷頁面中所有圖片加載完成

如果我們加載的是圖片，對于圖片是否加載完成，我們平時可以用監(jiān)聽圖片load 方法來進行。今天主要介紹用jquery的deferred對象來進行判斷。

關(guān)于jquery的deferred對象，是jquery的重點和難點。對于執(zhí)行較長時間的函數(shù)，我們通常用deferred對象。

關(guān)于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 ); 

可以同時調(diào)用多個ajax,然后通過then來返回成功或者失敗。

或者

$.when($.ajax("test1.html"), $.ajax("test2.html"))

.done(function(){ alert("哈哈，成功了！"); })

.fail(function(){ alert("出錯啦！"); });

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

var defereds = []; //定義一個數(shù)組存放Deferred對象

$imgs.each(function() { //imgs循環(huán)所有圖片

  var dfd = $.Deferred();// 新建一個deferred對象

  $(this).load(dfd.resolve());// 圖片加載完成之后，改變deferred對象的執(zhí)行狀態(tài)

  defereds.push(dfd);//push到數(shù)組中

});

$.when.apply(null, defereds).done(function() {

  console.log('load compeleted');

});

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

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

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

假如我們有prints函數(shù)：

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