码迷,mamicode.com
首页 > Web开发 > 详细

jquery 延迟对象

时间:2015-09-15 14:20:03      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

1、done:延迟成功时,调用函数或数组函数

$.get("test.php").done(function() { 
  alert("$.get succeeded"); 
});

2、fail:延迟失败时调用

$.get("test.php")
  .done(function(){ alert("$.get succeeded"); })//延迟成功
  .fail(function(){ alert("$.get failed!"); });//延迟失败

3、reject:切换状态,未完成到已失败

4、rejectWith:比reject多了上下文

5、resolve:切换状态,未完成改为已完成

6、resolveWith:比reslove多了上下文

7、then:添加处理程序被调用时,递延对象得到解决或者拒绝

done和fail和在一起,then(successFunc, failureFunc), 如果只有一个参数,则是done

8、always:不管调用的是deferred.resolve()还是deferred.reject(),都会执行。

9、promise:保证目前的执行状态----也就是"未完成"----不变,从而确保只有操作完成后,才会触发回调函数

10、notify:调用then,progress的回调函数

11、notifyWith:加个上下文

12、progress:未完成时,执行progress的回调函数

 

总结:

done/fail/progress 是 callbacks.add,将回调函数存入
resolve/reject/notify 是 callbacks.fire,执行回调函数(或队列)

 

很好地教程:jquery的deferred对象详解  http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

deferred:异步或同步耗时操作的回调函数解决方案

提高可读性

ajax的操作:$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。

$.ajax({
    url: "test.html",
    success: function(){
      alert("哈哈,成功了!");
    },
    error:function(){
      alert("出错啦!");
    }
  });

新的写法:简洁多了,代码可读性大大提高

$.ajax("test.html")
  .done(function(){ alert("哈哈,成功了!"); })   // success
  .fail(function(){ alert("出错啦!"); });    //error

 

可加多个回调函数:按添加顺序执行;如果第一个耗时,第二个会等吗?

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

  

为多个操作加回调

//先执行两个操作$.ajax("test1.html")和$.ajax("test2.html"),如果都成功了,就运行done()指定的回调函数;如果有一个失败或都失败了,就执行fail()指定的回调函数。
// when是一个工具方法
$.when($.ajax("test1.html"), $.ajax("test2.html"))   .done(function(){ alert("哈哈,成功了!"); })   .fail(function(){ alert("出错啦!"); });

 

本地操作:

// 改写wait函数,使其返回deferred对象,才能使用when函数
var dtd = $.Deferred(); // 新建一个deferred对象   var wait = function(dtd){     var tasks = function(){       alert("执行完毕!");       dtd.resolve(); // 改变deferred对象的执行状态     };     setTimeout(tasks,5000);     return dtd;   };
// 参数为deferred $.when(wait(dtd))   .done(function(){ alert("哈哈,成功了!"); })   .fail(function(){ alert("出错啦!"); });

  

deferred对象三种状态:未完成(progress),已完成(done),已失败(fail)。

前面部分的ajax操作时,deferred对象会根据返回结果,自动改变自身的执行状态;但是,在wait()函数中,这个执行状态必须由程序员手动指定。dtd.resolve()的意思是,将dtd对象的执行状态从"未完成"改为"已完成",从而触发done()方法。

promise():如上dtd是一个全局对象,可以从外部修改其状态。此时就需要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(); // 此时,这个语句是无效的

更好的写法:把dtd变为wait的内部对象

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(wait)
  .done(function(){ alert("哈哈,成功了!"); })
  .fail(function(){ alert("出错啦!"); });

$.Deferred()可以接受一个函数名(注意,是函数名)作为参数,$.Deferred()所生成的deferred对象将作为这个函数的默认参数。

 

再一种写法:在wait对象上部署deferred接口

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

  

  

  

  

  

  

  

jquery 延迟对象

标签:

原文地址:http://www.cnblogs.com/wang-jing/p/4809929.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!