ajax请求中带判断语句例子,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,["脚","本","之","家"]);//输出:脚本之家
ajax请求中带判断语句例子,jQuery中借助deferred来请求及判断AJAX加载的实例讲解...相关推荐
- 【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
文章目录 1. Ajax概述 1.1 AJAX 简介 1.2 XML 简介 1.3 AJAX 的特点 1.3.1 AJAX 的优点 1.3.2 AJAX 的缺点 2. HTTP相关问题 2.1 MDN ...
- 基于JQuery实现滚动到页面底端时自动加载更多信息
基于JQuery实现滚动到页面底端时自动加载更多信息关键代码:代码如下: var stop=true; $(window).scroll(function(){ totalheight = parse ...
- jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- jquery中的ajax请求的基本使用以及登陆注册不刷新页面的例子/jquery中get、post以及ajax的使用/运用jQuery实现登陆注册案例
1.登陆注册案例: index.html代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
- ajax拒绝访问,带CORS的IE9 jQuery AJAX返回“访问被拒绝”
带CORS的IE9 jQuery AJAX返回"访问被拒绝" 以下适用于IE以外的所有浏览器(我在IE 9中测试).jQuery.support.cors = true;... $ ...
- python if else语句例子,python 中if else 语句的作用及示例代码
引入:if-else的作用,满足一个条件做什么,否则做什么. if-else语句语法结构 if 判断条件: 要执行的代码 else: 要执行的代码 判断条件:一般为关系表达式或bool类型的值 执行过 ...
- pythonfor循环语句例子_Python中的for循环语句
for循环 for..in是另外一个循环语句,它在一序列的对象上 递归 即逐一使用队列中的每个项目. 使用for语句 案例: fori inrange(1,5):print(i)else:print( ...
- ajax php加载列表实例,jQuery+PHP+ajax实现加载更多内容列表
我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我 ...
最新文章
- CVPR2020 | 通过可微的代理投票损失进行6DoF对象位姿估计
- 分类家族:二分类、多分类、多标签分类、多输出分类
- vue+vue-router+vuex实战
- (一) 自带刷新的列表-LtRecyclerView v2.x版本(LtAdapter)(基本使用)
- 注册assembly的问题
- php 请求header,PHP的curl查看header信息的功能(包括查看返回header和请求header)
- 测试AS3的性能9800粒子
- MongoDB 之 你得知道MongoDB是个什么鬼 MongoDB - 1
- python并发循环_在Python中模拟一个并发循环?
- 《写给程序员的数据挖掘实践指南》——5.2. 10折交叉验证的例子
- BZOJ2327: [HNOI2011]勾股定理
- FreeTextBox使用详解(FTBv3-1-6)
- 机载激光雷达原理与应用科普(四)
- LeetCode-618. 学生地理信息报告(困难)行转列
- Bulma CSS - 简介
- 百度收录提交工具-免费主动提交百度快速收录软件
- 名字也可能惹祸?Gitee.com被停止域名解析
- Ubuntu常用操作
- windos命令小全
- 个人理解之内网ip与外网ip