jquery deferred小结

jquery deferred是一个异步回调的机制

  • 目前,jQuery的Ajax方法($.ajax,$get,$post)返回的都是Promise对象。
  • 异步回调的适合作用于i/o事件,要等待用户动作才能做出相应的callback。
    •   比如,传递promise对象就相当于声明:“你感兴趣的某某事就要发生了,想知道什么时候完事吗?给这个promise一个回调就行了!“
  • promise对象和EventEmitter对象一样,允许向同一个事件绑定任意多的处理器(堆积技术)

    •   如$(‘#doucment‘).click(callback1).click(callback2);    ----EventEmitter
    • fn().then(callback1).then(callback2ForCallback1);    ----promise
  • Promise对象有多个结果
    •   done(callbakc)
    • fail(callback)
    • always(callback)    不管成功失败总是调用
    • progress(callback)   对于挂起状态的Deferred对象调用notify时,运行progress回调
  • Deferred是promise对象的超集,它比Promise多了一项关键特性:可以直接触发;而纯Promise实例只允许添加多个调用,而且必须由其他什么东西触发调用
    •   resolve()会直接触发done
    • reject()会直接触发fail
    • notify会调用我们设定的progress回调
    • 三者都能接受任意参数

          <textarea id="document"></textarea>
          <p id="indicator"></p>
      
          <script type="text/javascript" src="jquery.js"></script>
          <script type="text/javascript">
          //创建一个deferred对象
          var defer = $.Deferred();
          var wordGoal = 30;
          //defer挂起时的callback
          defer.progress(function (wordCount) {
              var percentComplete = Math.floor(wordCount/wordGoal*100);
              $(‘#indicator‘).text(percentComplete + ‘%complete‘);
          });
          //defer完成时的callback
          defer.done(function(msg) {
              $(‘#indicator‘).text(msg);
          });
      
          //事件回调
          $(‘#document‘).on(‘keypress‘, function() {
              var wordCount = $(this).val().split(/\s+/).length;
              //回调中监听完成事件并触发
              if (wordCount >= wordGoal) {
                  defer.resolve(‘Good job!‘);
              }
              //回调中监听挂起事件并处罚
              defer.notify(wordCount);
          });
          </script>

      *一旦执行了defer对象,再做defer的notify将不会有任何反应,就像任何额外的resolve调用及reject调用也会被无视一样

时间: 2024-11-08 22:35:47

jquery deferred小结的相关文章

jquery Deferred

jquery Deferred使用经验 这周做了个小活动(http://aoqi.100bt.com/zt-2016duanzi/index.html),刚开始时候没看好需求,逻辑都写一块了 最后各种坑要填补,从中也获取了些经验和教训,下面说说这里会用到的$.Deferred: 关于jquery里面的deferred的基本使用方法,阮一峰大婶已经有文章说明了,链接如下: http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_o

javascript --- jQuery --- Deferred对象

javascript --- jQuery --- Deferred对象 javascript的函数式编程是多么引人入胜,jQuery使代码尽可能的精简,intelligent! defer - 必应词典:v.迁延:听从:扣存:[军]使延期入伍所以deferred对象的含义就是"延迟"到未来某个点再执行. jQuery的官方文档给出了用jQuery.ajax()发送请求的基本方式http://api.jquery.com/jQuery.ajax/Example: Save some d

jquery.Deferred promise解决异步回调

我们先来看一下编写AJAX编码经常遇到的几个问题: 1.由于AJAX是异步的,所有依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套,ajax等异步操作越多,嵌套层次就会越深,代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol

jQuery异步框架探究2:jQuery.Deferred方法

(本文针对jQuery1.6.1版本)关于Deferred函数的描述中有一个词是fledged,意为"羽翼丰满的",说明jQuery.Deferred函数应用应该更成熟.这个函数与jQuery._Deferred函数有密不可分的关系. 1 内部实现 Deferred: function( func ) { var deferred = jQuery._Deferred(), failDeferred = jQuery._Deferred(), promise; // Add error

第三十三课:jQuery Deferred

之前我们讲了Mochikit Deferred,JSDeferred,现在讲jQuery Deferred.首先,我们先来讲下他们的区别: 在保存回调函数时,Mochikit Deferred(dojo Deferred)是用一个2维数组保存的,里面的小数组只有两项,一个是成功回调的函数,一个是失败回调的函数. JSDeferred则每个实例都必有ng,ok这两个回调函数. jQuery Deferred则一个_Deferred负责添加成功回调,一个负责添加错误回调. 它们的API区别如下图:

JS魔法堂:jQuery.Deferred(jQuery1.5-2.1)源码剖析

一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var promise = $.getJSON('dummy.js') // 其他逻辑处理 promise.then(function(){ alert('late binding') }) 我还一度以为这就是Promises/A+规范的实现,但其实jQuery.Deferred应该与jsDeferred归为

jquery deferred done then区别

jquery deferred done then区别 deferred是jquery 对promise的实现. 以下内容基于jquery 1.8及以上版本 deferred具有then done等属性.其区别在于Deferred resolved时, done返回当前的的deferred object,callback的返回值不会被传递 then返回一个新的deferred object,callback的返回值会被传递(参考jquery的pipe属性)给新的callback 通过以下的例子来

javascript异步代码的回调地狱以及JQuery.deferred提供的promise解决方式

我们先来看一下编写AJAX编码常常遇到的几个问题: 1.因为AJAX是异步的,全部依赖AJAX返回结果的代码必需写在AJAX回调函数中.这就不可避免地形成了嵌套.ajax等异步操作越多,嵌套层次就会越深.代码可读性就会越差. $.ajax({ url: url, data: dataObject, success: function(){ console.log("I depend on ajax result."); }, error: function(){} }); consol

jQuery deferred 使用心得

因为项目的原因,我接触到了jQuery deferred 的这个神奇的工具,下面我用几个例子,与大家分享我的感悟. 我们有5个很耗时的函数 分别为fA.fB.fC.fD.fE  我们的需求是fA和fB同时执行,fA和fB都执行完了,就同时执行fC 和fD ,其中fC和fD只要有一个执行完了,就可以执行fE了. 先完成第一步,写5个函数,并加入deferred 1 function fA(){ 2 var dtd = $.Deferred(); 3 console.log('fa Start');