JQuery的deferred对象学习总结

Posted 2020-10-14

什么是deferred？

    可以帮助我们按规定的顺序执行函数，比如说我们ajax请求数据之后，对dom进行数据填充，那我们就要先执行完ajax，拿到数据之后才能进行dom数据填充，所以这就是一个顺序执行的过程，传统的做法是事先定义好回调函数，当检测到数据请求完成时，执行事先定义的回调函数。但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。帮助我们更好的控制函数执行顺序。

1.5版本后的jquery使用$.ajax()返回的是deferred对象

 

deferred常见用法：

  1.链式调用

　$.ajax("test.html")
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

    当请求完成，执行done方法；当请求失败，执行fail方法。

 

 2.指定同一操作的多个回调函数

        deferred对象的一大好处，就是它允许你自由添加多个回调函数。而如果使用传统的回调函数，那么我们只能定义一个success方法。

    

　　$.ajax("test.html")
　　.done(function(){ alert("哈哈，成功了！");} )
　　.fail(function(){ alert("出错啦！"); } )
　　.done(function(){ alert("第二个回调函数！");} );

      可以看到，我们调用了两个done方法，当请求成功时，会按他们调用的顺序来先后执行两个done方法。

 

3.为多个操作指定回调函数

  deferred对象的另一大好处，就是它允许你为多个事件指定一个回调函数，这是传统写法做不到的。

　　$.when($.ajax("test1.html"), $.ajax("test2.html"))
　　.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });

    可以看到，使用when方法，我们可以实现当两个ajax都成功时才执行done方法。

 

4.deferred对象不仅适用于ajax，任何本地操作你都可以使用deffer对象来控制你的方法执行顺序。

  var wait = function (dtd) {
      var dtd = $.Deferred();
      var tasks = function () {
          alert("任务完成！");
          dtd.resolve("666");
      };
      setTimeout(tasks, 3000);

      return dtd;
   };


   $.when(wait())
          .done(function (info) {
              console.log(info);
          })
          .fail()
          .always(function (info) {     //不管成功或失败都会执行always方法
              console.log(info);
          });

 

总结：deferred对象是jquery团队设计开发的一个对象，可以帮助我们实现函数按顺序调用。ajax使用deferred对象只是其中的一种用途，任何其他本地操作都能使用deferred对象。