个人认为阮一峰老师讲的关于deferred对象是最容易理解的。

deferred对象是jquery的回调函数解决方案。解决了如何处理耗时操作的问题,对那些操作提供了更好的控制,以及统一的编程接口。

deferred对象的功能:

1.将ajax操作改为链式

对于$.ajax()操作完成之后,如果使用的是低于1.5版本的jquery,返回的是XHR对象,高于1.5版本返回的是deferred对象。deferred对象可进行链式操作。

     $.ajax({
url:"test.html",
success:function(){},//success方法指定操作成功后的回调函数
error:function(){}//error方法指定操作失败后的回调函数
})
//新的写法
$.ajax("test.html")
.done(function(){})//done()相当于success方法
.failed(function(){})//failed()相当于error方法

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

deferred对象允许自由添加多个回调函数,回调函数按添加顺序执行

         $.ajax("test.html")
.done(function(){})
.failed(function(){})
.dene(function(){})//直接将多个方法加在后面

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

deferred对象允许为多个事件指定一个回调函数,利用$.when()方法

//先执行两个操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数
$.when($.ajax("test1.html"), $.ajax("test2.html"))
   .done(function(){})
   .fail(function(){});

4.普通操作的回调函数接口

deferred对象将回调函数的接口从ajax操作扩展到了所有操作。$.when()的参数只能是deferred对象

var wait = function(){
   alertvar tasks = function(){
       alert("执行完毕!");
   };
      setTimeout(tasks,5000);
};

为wai函数添加回调函数

var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
 var tasks = function(){
   alert("执行完毕!");
   dtd.reject(); // 改变Deferred对象的执行状态
 };
setTimeout(tasks,5000);
return dtd;
};
$.when(wait(dtd))
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });

存在问题:dtd是全局变量,容易被修改,解决办法:jquery的deferred.promise()方法。在原来的deferred对象上返回另一个deferred对象,后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),从而使得执行状态不能被改变。

第一种方法:

var dtd = $.Deferred(); // 新建一个Deferred对象
var wait = function(dtd){
var tasks = function(){
  alert("执行完毕!");
  dtd.resolve(); // 改变Deferred对象的执行状态
}; setTimeout(tasks,5000);
return dtd.promise(); // 返回promise对象
}; var d = wait(dtd); // 新建一个d对象,改为对这个对象进行操作
$.when(d)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
d.resolve(); // 此时,这个语句是无效的

第二种方法

var wait = function(dtd){
var dtd = $.Deferred(); //在函数内部,新建一个Deferred对象
  var tasks = function(){
      alert("执行完毕!");
      dtd.resolve(); // 改变Deferred对象的执行状态
  };   setTimeout(tasks,5000);
  return dtd.promise(); // 返回promise对象
  };
  $.when(wait())
  .done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出错啦!"); });
第三种方法:使用deferred对象的构造函数$.Deferred()
$.Deferred(wait)
.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
//jQuery规定,$.Deferred()可以接受一个函数名(注意,是函数名)作为参数,$.Deferred()所生成的deferred对象将作为这个函数的默认参数。

第四种方法:在wait方法上直接部署deferred对象

var dtd = $.Deferred(); // 生成Deferred对象
var wait = function(dtd){
  var tasks = function(){
    alert("执行完毕!");
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks,5000);
};
dtd.promise(wait);
wait.done(function(){ alert("哈哈,成功了!"); })
.fail(function(){ alert("出错啦!"); });
wait(dtd);

困了,今天先到这里,明天早上继续~

												

deferred对象和promise对象(一)的更多相关文章

  1. deferred对象和promise对象(二)---deferred对象

    早上醒来,继续讨论deferred对象和primise对象. deferred对象的的方法: 1.$.Deferred()-----生成一个deferred对象 2.deferred.done()-- ...

  2. JavaScript异步编程(1)- ECMAScript 6的Promise对象

    JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...

  3. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  4. ES6 Promise 对象

    Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...

  5. 微信小程序Promise对象

    Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise.prototype.catch() Promise.prototype.fin ...

  6. 13.Promise 对象

    Promise 对象 Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其 ...

  7. ES6的Promise对象

    http://es6.ruanyifeng.com/#docs/promise Promise 对象 Promise 的含义 基本用法 Promise.prototype.then() Promise ...

  8. 【jQuery】Deferred(延迟)对象

    本文针对jQuery-todolist项目中使用到的Deferred(延迟)对象进行具体分析 $.Deferred() 是一个构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传 ...

  9. ES6的新特性(15)——Promise 对象

    Promise 对象 Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了 ...

随机推荐

  1. JSON和Map,List,String互相转换

    1)Map 和 JSON 互相转换 Map 转成 JSON Map<String, List> map = new HashMap<>(); map.put("xAx ...

  2. Python作业本——第4章 列表

    课后习题: 1.[]是一个空列表 2. spam.insert(3, 'hello') 错,应为:spam[2] = 'hello' 3.['d']    'd' 4.['d']    'd' 5.[ ...

  3. STL容器(Stack, Queue, List, Vector, Deque, Priority_Queue, Map, Pair, Set, Multiset, Multimap)

    一.Stack(栈) 这个没啥好说的,就是后进先出的一个容器. 基本操作有: stack<int>q; q.push(); //入栈 q.pop(); //出栈 q.top(); //返回 ...

  4. 关于W3Cschool定义的设计模式-常用的9种设计模式的介绍

    一.设计模式 tip:每种设计模式,其实都是为了更高效的,更方便的解决在面对对象编程中所遇到的问题. 什么是设计模式:     是一套经过反复使用.多人知晓的.经过分类的.代码设计经验的总结   为什 ...

  5. 为什么使用B+Tree索引?

    什么是索引? 索引是一种数据结构,具体表现在查找算法上. 索引目的 提高查询效率 [类比字典和借书] 如果要查"mysql"这个单词,我们肯定需要定位到m字母,然后从下往下找到y字 ...

  6. Hive导入数据到HBase,再与Phoenix映射同步

    1. 创建HBase 表 create 'hbase_test','user' 2. 插入数据 put 'hbase_test','111','user:name','jack' put 'hbase ...

  7. Java位运算符&、|、^、>>、<<、~、>>>

    如果要搞懂Java中的位运算符,首先要搞懂二进制的运算,之前一篇有介绍详细请看 二进制运算-十进制与二进制的转换 Java中的位运算符有:&(按位与).|(按位或).^(按位异或).>& ...

  8. Docker学习之volume

    提供独立于容器之外的持久化存储 容器中的数据会随着容器的消失而消失,为了解决这个问题,产生了数据卷volume. 例子,比如说mysql容器,msyql中的数据应该是持久化的,故应该存储在volume ...

  9. 浅谈Linux进程管理

    一  查看系统进程 在linux中,查看系统进程的命令为ps,常用格式为如下两个: (1)ps aux:unix格式查看系统进程 (2)ps -le:linux格式查看系统进程 一般地,ps aux更 ...

  10. 格子游戏Grid game CodeForce#1104C 模拟

    题目链接:Grid game 题目原文 You are given a 4x4 grid. You play a game — there is a sequence of tiles, each o ...