欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中借助deferred來(lái)請(qǐng)求及判斷AJAX加載的實(shí)例講解

 更新時(shí)間：2016年05月24日 15:12:00   作者：Aaron  
deferred對(duì)象的延遲功能對(duì)jQuery的ajax操作是一個(gè)很大的幫助,尤其是回調(diào)控制,下面我們就來(lái)看一下對(duì)jQuery中借助deferred來(lái)請(qǐng)求及判斷AJAX加載的實(shí)例講解

ajax請(qǐng)求異步隊(duì)列加載
我們?cè)陂_(kāi)發(fā)程序的時(shí)候通常會(huì)碰到使用ajax加載數(shù)據(jù)顯示到列表的情況。ajax默認(rèn)使用異步加載（async:true）。為什么不使用同步呢，因?yàn)閍jax同步加載會(huì)UI渲染線程阻塞的問(wèn)題。通常表現(xiàn)為在加載大量數(shù)據(jù)時(shí)由于加載時(shí)間過(guò)長(zhǎng)導(dǎo)致頁(yè)面不能點(diǎn)擊、gif動(dòng)畫(huà)卡死以及瀏覽器崩潰等問(wèn)題。所以，一般情況下，盡量使用ajax異步加載。
可是，我們有些時(shí)候的需求要求ajax同步加載，一個(gè)加載完再加載下一個(gè)，即所謂的隊(duì)列。前面我們有說(shuō)過(guò)，同步加載會(huì)引起UI渲染阻塞問(wèn)題。那么我們要怎么實(shí)現(xiàn)順序加載而不引起該問(wè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后臺(tái)代碼：

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

當(dāng)然，jquery也提供了我們deferred對(duì)象來(lái)解決回調(diào)函數(shù)的問(wèn)題。
示例代碼二：

<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保存下來(lái)的數(shù)據(jù)
  if(i<length-1){
   recycleData(i+1,length);//遞歸
  }
 })
}
</script>

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

用jquery的deferred對(duì)象實(shí)現(xiàn)判斷頁(yè)面中所有圖片加載完成
如果我們加載的是圖片，對(duì)于圖片是否加載完成，我們平時(shí)可以用監(jiān)聽(tīng)圖片load 方法來(lái)進(jìn)行。今天主要介紹用jquery的deferred對(duì)象來(lái)進(jìn)行判斷。
關(guān)于jquery的deferred對(duì)象，是jquery的重點(diǎn)和難點(diǎn)。對(duì)于執(zhí)行較長(zhǎng)時(shí)間的函數(shù)，我們通常用deferred對(duì)象。
關(guān)于deferred對(duì)象，我在這里稍微介紹一下$.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 );

可以同時(shí)調(diào)用多個(gè)ajax,然后通過(guò)then來(lái)返回成功或者失敗。

或者

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

我們回到正題來(lái)，用jquery的deferred對(duì)象實(shí)現(xiàn)判斷頁(yè)面中所有圖片加載完成

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

$imgs.each(function() { //imgs循環(huán)所有圖片
  var dfd = $.Deferred();// 新建一個(gè)deferred對(duì)象

  $(this).load(dfd.resolve());// 圖片加載完成之后，改變deferred對(duì)象的執(zhí)行狀態(tài)
  defereds.push(dfd);//push到數(shù)組中
});
$.when.apply(null, defereds).done(function() {
  console.log('load compeleted');
});

因?yàn)?$.when 支持的參數(shù)是 $.when(dfd1, dfd2, dfd3, ...)，所以我們這里使用了 apply 來(lái)接受數(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

或者我們可以這么寫(xiě)：

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

相關(guān)文章

最新評(píng)論