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

<script src="/UploadFiles/2021-04-02/jquery.min.js">

PHP后台代码：




<"data"];
sleep(1);//延迟1秒
echo "输出".$str;
"htmlcode">

<script src="/UploadFiles/2021-04-02/jquery.min.js">

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





            
            上一篇：JS实现回到页面顶部动画效果的简单实例

            下一篇：JS 清除字符串数组中,重复元素的实现方法