zoukankan      html  css  js  c++  java
  • JQuery的deferred对象学习总结

    什么是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对象。

         

  • 相关阅读:
    Scrapy 扩展中间件: 针对特定响应状态码,使用代理重新请求
    Scrapy 扩展中间件: 同步/异步提交批量 item 到 MySQL
    Scrapy 隐含 bug: 强制关闭爬虫后从 requests.queue 读取的已保存 request 数量可能有误
    Scrapyd 改进第二步: Web Interface 添加 STOP 和 START 超链接, 一键调用 Scrapyd API
    简单示例理解神闭包
    ejs 模板使用方法
    我使用的开源组件汇总,以备学习使用
    了不起的Node.js--之五 TCP连接
    Windows7下Java运行时环境搭建
    了不起的Node.js--之四
  • 原文地址:https://www.cnblogs.com/yonglin/p/7819706.html
Copyright © 2011-2022 走看看