javascript --- jQuery --- Deferred对象

javascript --- jQuery --- Deferred对象

javascript的函数式编程是多么引人入胜,
jQuery使代码尽可能的精简,intelligent!

defer - 必应词典:v.迁延;听从;扣存;【军】使延期入伍
所以deferred对象的含义就是"延迟"到未来某个点再执行。

jQuery的官方文档给出了用jQuery.ajax()发送请求的基本方式
http://api.jquery.com/jQuery.ajax/
Example: Save some data to the server and notify the user once it‘s complete.

服务端需要接收数据,这里为了方便起见,我们请求一个静态文件sample.html
sample.html的内容如下:
\jQuery_Deferred\sample.html

<!DOCTYPE html>
<html>
<body>
    Ajax请求返回的数据!
</body>
</html>

这里的ajax方法请求的是静态文件sample.html
\jQuery_Deferred\deferred1.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<script>
    $.ajax({
        type: "POST",
        url: "sample.html",
        data: { name: "John", location: "Boston" }
    }).done(function (msg) {
        alert("Data Saved: " + msg);
    });
</script>
</body>
</html>

用浏览器打开后,可以看到如下的结果:picture

本文参考了阮一峰的日志:
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html
deferred对象彻底改变了在jQuery中使用ajax
如果对ajax陌生,可以参考我以前写的日志:
http://www.cnblogs.com/kodoyang/p/Javascript_Ajax_XMLHttpRequest_Encapsulation.html

deferred对象就是jQuery的回调函数解决方案
下面是阮一峰博客的原文:

{
开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。
  其中,既有异步的操作(比如ajax读取服务器数据),
  也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的。
通常的做法是,为它们指定回调函数(callback)。
  即事先规定,一旦它们运行结束,应该调用哪些函数。
  它解决了如何处理耗时操作的问题,
  对那些操作提供了更好的控制,以及统一的编程接口。
}

jQuery的ajax的传统写法如下:
jQuery的在线API 文档: http://jquery.cuishifeng.cn/
\jQuery_Deferred\deferred2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Traditional Ajax</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<script>
    $.ajax({
        url: "test.html",
        context: document.body,
        success: function () {
            $(this).addClass("done");
        }
    });
</script>
</body>
</html>

\jQuery_Deferred\test.html

<p>
success data!
</p>

使用Deferred对象的链式操作,写法如下:
\jQuery_Deferred\deferred3.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Deferred Ajax</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
    <script>
        $.ajax("test1.html")
                .done(function(data){
                    alert(data);
                })
                .fail(function(){
                    alert("error!");
                });
    </script>
</body>
</html>

这里$.ajax()返回的是deferred对象

deferred对象允许自由添加多个回调函数
\jQuery_Deferred\deferred4.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Deferred add callback function</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<script>
    $.ajax("test.html")
            .done(function(data){
                alert(data);
            })
            .fail(function(){
                alert("error!");
            })
            .done(function(){
                alert("haha, success!");
            });
</script>
</body>
</html>

deferre对象允许为多个事件指定一个回调函数
当两个操作都返回成功时,运行done()指定的回调函数

\jQuery_Deferred\deferred5.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>above one request</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<script>
    $.when($.ajax("test.html"), $.ajax("sample.html"))
            .done(function(){
                alert("哈哈,成功了!");
            })
            .fail(function(){
                alert("出错啦!");
            });
</script>
</body>
</html>

使用普通操作的回调函数接口
\jQuery_Deferred\deferred6.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>general function</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<script>
    var wait = function(){
        setTimeout(function(){
            alert("执行完毕!");
        }, 5000);
    }
</script>
</body>
</html>

我们应该怎样为它指定回调函数?
$.ajax返回的是deferred对象,所以可以链式调用

具体的细节可以查看阮一峰的日志,我这里给出最后的写法:
\jQuery_Deferred\deferred7.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>final code</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<script>
    /**
     * Deferred对象有三种执行状态:
     * 未完成:
     *      继续等待,或者调用progress()方法指定的回调函数
     * 已完成:
     *      deferred.resolve() 调用后
     *      deferred对象立刻调用done()方法指定的回调函数
     * 已失败:
     *      deferred.reject() 调用后
     *      调用fail()方法指定的回调函数
     *
     * Deferred.promise函数:
     *      避免Deferred对象的“执行状态”在外部发生改变
     *      它的作用是,在原来的deferred对象上返回另一个deferred对象,
     *      后者只开放与改变执行状态无关的方法(比如done()方法和fail()方法),
     *      屏蔽与改变执行状态有关的方法(比如resolve()方法和reject()方法),
     *      从而使得执行状态不能被改变。
     *
     * @returns 不能改变执行状态的Deferred对象
     */
    function wait(){
        // 在函数内部,新建一个Deferred对象
        var deferred = $.Deferred();
        setTimeout(function(){
            alert("执行完毕!");
            // 改变Deferred对象的执行状态
            deferred.resolve();
        }, 5000);
        // 返回promise对象
        return deferred.promise();
    }

    /**
     * 接受一个Deferred对象,
     * 当检测到对象的执行状态发生改变后,调用相应的函数
     */
    $.when(wait())
            .done(function(){
                alert("hahah, 成功了!");
            })
            .fail(function(){
                alert("aaouu,出错了!")
            });
</script>
</body>
</html>

最后介绍一下Deferred.alway()函数
不管调用的是deferred.resolve()还是deferred.reject(),最后总是执行。
\jQuery_Deferred\deferred8.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>reject then always</title>
    <script src="jquery-2.1.1.js"></script>
</head>
<body>
<script>
    /**
     * 这个方法也是用来指定回调函数的,它的作用是,
     * 不管调用的是deferred.resolve()还是deferred.reject(),
     * 最后总是执行。
     */
    $.when($.ajax("test1.html"))
            .always(function(data){
                alert("已执行:" + data);
            });
</script>
</body>
</html>

请关注我的日志:http://www.cnblogs.com/kodoyang/

For Better Programming!

时间: 2024-10-27 06:06:12

javascript --- jQuery --- Deferred对象的相关文章

jquery deferred对象

一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的. 通常的做法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结束,应该调用哪些函数. 但是,在回调函数方面,jQuery的功能非常弱.为了改变这一点,jQuery开发团队就设计了deferred对象. 二.ajax操作的链式写法 $.ajax()操作完成后

使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题

原文地址:http://www.2cto.com/kf/201507/424202.html 之前的文章javascript异步代码的回调地狱中提到了编写AJAX代码经常遇到的3个问题,现在我们看下如何利用then()解决第2个问题:如果AJAX请求之间存在依赖关系,我们的代码就会形成Pyramid of Doom(金字塔厄运).比如我们要完成这样一件事:有4个供Ajax访问的url地址,需要先Ajax访问第1个,在第1个访问完成后,用拿到的返回数据作为参数再访问第2个,第2个访问完成后再第3个

javascript jquery 推断对象为空的方式

java中存在非常多空指针的问题,须要常常做预防和推断,如若不然,控制台出现恼人的异常,让人信心备受打击,早期敲代码的时候没有经验,不能依据异常信息找到问题的根源,唯一做的事情就是祈祷,千万别出现什么异常信息啊!如今碰到与问题,到希望异常信息越具体越好,但偏偏事与愿违,我们所採用的框架竟然把所有的异常所有throws 即使再controller获取也比較麻烦,一旦出现与预期不一样的结果,都不知道是哪里出了问题,调试起来确实不便. js中也是一样,尽管不会出现一大串异常代码,但控制台还是会有错误警

javascript jquery 判断对象为空的方式

java中存在很多空指针的问题,需要经常做预防和判断,如若不然,控制台出现恼人的异常,让人信心备受打击,早期写程序的时候没有经验,不能根据异常信息找到问题的根源,唯一做的事情就是祈祷,千万别出现什么异常信息啊!现在碰到与问题,到希望异常信息越详细越好,但偏偏事与愿违,我们所采用的框架居然把所有的异常全部throws 即使再controller获取也比较麻烦,一旦出现与预期不一样的结果,都不知道是哪里出了问题,调试起来确实不便. js中也是一样,虽然不会出现一大串异常代码,但控制台还是会有错误警告

JavaScript&amp;jQuery.Date对象和Time对象

Date对象和Time对象 Date对象用于操作日期 Time对象用于操作时间 Date对象在使用时前需要先实例化,采用构造函数实例化. var today=new Date(); // 返回年份 document.write(today.getFullYear()); document.write('<br>'); // 返回月份,从0到11,0表示1月,11表示12月 document.write(today.getMonth()); document.write('<br>'

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

【转载】学习资料存档:jQuery的deferred对象详解

我在以前的文章里提到promise和deferred,这两个东西其实是对回调函数的一种写法,javascript的难点之一是回调函数,但是我们要写出优秀的javascript代码又不得不灵活运用回调函数,大型javascript代码里都会大量运用回调函数,大量的标准回调函数写法的坏处就是使得代码的阅读性和可维护性降低,因此出现了promise模式和大量deferred库,jQuery很优秀,但是jQuery早期的版本对优雅回调写法的支持远远不够,直到jQuery1.5引入了deferred后,这

jQuery的deferred对象详解

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备

jQuery的deferred对象

今天学习jQuery API的时候看到deferred部分,以前也没有接触使用过,看的毫无头绪,于是找资料学习了一番. deferred对象代表了将要完成的某种操作,并提供了一些方法,帮助用户使用.它是jQuery对Promises接口的实现.由于JavaScript单线程的特点,如果某个操作耗时很长,其他操作就必需排队等待.为了避免整个程序失去响应,通常的解决方法是将那些排在后面的操作,写成“回调函数”(callback)的形式.这样做虽然可以解决问题,但是有一些显著缺点: 回调函数往往写成函