jQuery中借助deferred来请求及判断AJAX加载的实例讲解

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,["脚","本","之","家"]);//输出：我们
赞 (0)

相关推荐

  • JavaScript & jQuery完美判断图片是否加载完毕

    众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求.在服务端生成item列表后,通过 js append到相应的div里边. 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端. 例如我的图片地址: http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg 而图片下载到本地是需要一定时间的(网速快的路过).当图片还没有下载完的时候,使用js获取到元素的宽高将会是0. 有的同学说了我

  • 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用js中Image对象,通过 onload 事件和 onreadystatechange 来进行判断. (1)第一中方法,通过onload事件,比如: 复制代码 代码如下: <script type="text/javascript">var obj=n

  • js或者jquery判断图片是否加载完成实现代码

    网页中有时候需要获得图片的宽度和高度,来定义某些大小,可是这个是需要从服务端请求图片,下载到本地才能够得到的,有些js或者jquery代码在还没有加载完图片时就执行了.怎么办呢? jquery提供一个方法: 复制代码 代码如下: 01.$("").load(function(){...}); 其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是: 用js的onload方法: 复制代码 代

  • js下判断 iframe 是否加载完成的完美方法

    采用的方法很类似: 复制代码 代码如下: var iframe = document.createElement("iframe"); iframe.src = "http://www.jb51.net"; if (!/*@cc_on!@*/0) { //if not IE iframe.onload = function(){ alert("Local iframe is now loaded."); }; } else { iframe.on

  • jQuery 判断图片是否加载完成方法汇总

    对于图片的处理,例如幻灯片播放.缩放等,都是依赖于在所有图片完成之后再进行操作. 今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用 loading 的 gif 图表示正在加载中. 一.普通方法 监听 img 的 load 方法,每 load 一张图片比较一次.关键代码如下: var num = $img.length; $imgs.load(function() { num--; if (num > 0) { return; } console.log('load compelet

  • 检测jQuery.js是否已加载的判断代码

    当然,该方法不局限于jQuery的检测,对与任何Javascript变量或函数都是通用的. 当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方法: 方法1: 复制代码 代码如下: if (jQuery) { // jQuery 已加载 } else { // jQuery 未加载 } 方法2: 复制代码 代码如下: if (typeof jQuery == 'undefined') { // jQuery 未加载 } else {

  • JQuery判断子iframe何时加载完成解决方案

    项目中遇到场景:一个按钮要在子iframe加载完成之后才能被点击,这是就需要知道iframe何时加载完成,用JQuery很简单就能实现,代码如下: 复制代码 代码如下: var isOnLoad = true; youIFrame.attr("src", url); youIFrame.load(function() { isOnLoad = false;// 加载完成 alert('load success'); }); 已验证通过!

  • 用js判断页面是否加载完成实现代码

    用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 代码如下: 复制代码 代码如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomething() { if(document.readyState == "complete") //当页

  • Javascript 判断Flash是否加载完成的代码

    先定义进度条显示层: 复制代码 代码如下: <div><span class="intro">下载进度:</span> <div class="barborder"> <div class="bar" id="loadpercent"></div> </div> </div> 定义广告层: 复制代码 代码如下: <div id

  • jQuery中借助deferred来请求及判断AJAX加载的实例讲解

    ajax请求异步队列加载 我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞的问题.通常表现为在加载大量数据时由于加载时间过长导致页面不能点击.gif动画卡死以及浏览器崩溃等问题.所以,一般情况下,尽量使用ajax异步加载. 可是,我们有些时候的需求要求ajax同步加载,一个加载完再加载下一个,即所谓的队列.前面我们有说过,同步加载会引起UI渲染阻塞问题.那么我们要怎么实

  • 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的源码,涉及到的模块比较多,(水平有限)代码比较难看懂:自己结合了一些书籍内容,总结一下.先说一下ready函数的实现思路:变量ready通过表达式赋值,右侧为一个自执行匿名函数,在这个匿名函数中,首先为各个浏览器的事件绑定处理函数,并为isReady赋值(根据事件异步处理程序来确定),然后返回一个传参闭包,在闭包中,主要判断isReady值来执行操作,如果dom

  • jquery zTree异步加载简单实例讲解

    本文实例讲解了jquery zTree异步加载,分享给大家供大家参考,具体内容如下 web.xml中Servlet配置如下: <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XM

  • jQuery中的deferred对象和extend方法详解

    1 deferred对象 deferred对象是jQuery的回调函数解决方案,它是从jQuery1.5.0版本开始引入的功能 deferred对象的方法 (1) $.Deferred() 生成一个deferred对象. (2) deferred.done() 指定操作成功时的回调函数 (3) deferred.fail() 指定操作失败时的回调函数 (4) deferred.promise() 没有参数时,返回一个新的deferred对象,该对象的运行状态无法被改变:接受参数时,作用为在参数对

  • 详解jQuery中的deferred对象的使用（一）

    deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作.网页动画.web worker等等. jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象. 在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的

  • 利用jQuery的deferred对象实现异步按顺序加载JS文件

    利用jQuery的deferred对象实现异步按顺序加载JS文件

    前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正. 如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文. 加载JS文件的代码如下: 复制代码 代码如下: /* Loading Ja

  • python中判断文件编码的chardet(实例讲解)

    1.实测,这个版本在32位window7和python3.2环境下正常使用. 2.使用方法:把解压后所得的chardet和docs两个文件夹拷贝到python3.2目录下的Lib\site-packages目录下就可以正常使用了. 3.判断文件编码的参考代码如下: file = open(fileName, "rb")#要有"rb",如果没有这个的话,默认使用gbk读文件. buf = file.read() result = chardet.detect(buf)

  • python模块中判断全局变量的赋值的实例讲解

    1.在模块中,我们需要判断__name__是否被赋值为"__main__". python fibo.py <arguments> 2.在脚本执行的情况下,模块的__name__属性将被赋值为__main__,这就是原因所在. $ python fibo.py 50 0 1 1 2 3 5 8 13 21 34 3.若以模块导入,则不会执行: >>> import fibo >>> 知识点扩展: Python动态声明变量赋值代码实例 通过

  • jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. 下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码. 请看下面效果图: 在线预览    源码下载 html代码: <div

  • JavaScript判断页面加载完之后再执行预定函数的技巧

    JavaScript 脚本语言的执行,是需要触发的.一般的做法就是在网页中,直接编写几个函数,有的在代码被加载的时候就被浏览器处理,或者使用类似下面的代码来触发实现函数的相关功能. <div id="link" onclick="fun()" ></div> 上面代码的意思就是,当鼠标点击 id 为 link 的元素的时候,就触发了它的 onclick 事件,然后执行使用 JavaScript 定义的 fun 函数.这样的做法肯定是很不合理的

随机推荐