ajax完成异步加载案例,JavaScript_jQuery中借助deferred来请求及判断AJAX加载的实例讲解，ajax请求异步队列加载 我们在 - phpStudy...

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

ajax请求异步队列加载我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况。ajax默认使用异步加载(async:true)。为什么不使用同步呢，因为ajax同步加载会UI渲染线程阻塞的问题。通常表现为在加载大量数据时由于加载时间过长导致页面不能点击、gif动画卡死以及浏览器崩溃等问题。所以，一般情况下，尽量使用ajax异步加载。

可是，我们有些时候的需求要求ajax同步加载，一个加载完再加载下一个，即所谓的队列。前面我们有说过，同步加载会引起UI渲染阻塞问题。那么我们要怎么实现顺序加载而不引起该问题呢？

示例代码一：

$(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

getData(i+1,length);

}

}

});

}

PHP后台代码：

$str = $_POST["data"];

sleep(1);//延迟1秒

echo "输出".$str;

?>

当然，jquery也提供了我们deferred对象来解决回调函数的问题。

示例代码二：

$(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

recycleData(i+1,length);//递归

}

})

}

这里首先创建一个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,["脚","本","之","家"]);//输出：phpstudy

相关阅读:

Linux操作Git远程仓库与本地仓库同步的教程

解析Java继承中方法的覆盖和重载

jquery form 加载数据示例

windows8.1+iis8.5下安装node.js开发环境

win10预览版10056无法升级更新的解决方法

ie6,7下空DIV无任何内容时占据空间问题解决

Java关于IO流的全面介绍

js enter键激发事件实例代码

网站接入QQ登录的两种方法

JavaScript将页面表格导出为Excel的具体实现

MySQL中join语句的基本使用教程及其字段对性能的影响

浅谈inline-block及解决空白间距

asp.net简单实现页面换肤的方法

JS实现从网页顶部掉下弹出层效果的方法