jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2019/6/27 22:24:23
本文主要是介绍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,["脚","本","之","家"]);//输出:找一找教程网
这篇关于jQuery中借助deferred来请求及判断AJAX加载的实例讲解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-24Vue CLI多环境配置学习:从入门到实践
- 2024-11-24Vue CLI多环境配置学习:新手入门教程
- 2024-11-24Vue CLI学习:初学者指南
- 2024-11-24Vue CLI学习:从入门到上手的简单教程
- 2024-11-24Vue3+Vite学习:从零开始的前端开发之旅
- 2024-11-24Vue3阿里系UI组件学习入门教程
- 2024-11-24Vue3的阿里系UI组件学习入门指南
- 2024-11-24Vue3公共组件学习:新手入门教程
- 2024-11-24Vue3公共组件学习入门指南
- 2024-11-24vue3核心功能响应式变量学习