jQuery中借助deferred来请求及判断AJAX加载的实例讲解
需积分: 10 57 浏览量
2020-11-24
06:09:23
上传
评论
收藏 58KB PDF 举报
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+"");
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+"");
defer.resolve(data);
}
});
评论0