jQuery中的Deferred和promise

最新推荐文章于 2024-04-19 15:08:32 发布

weixin_30699955

最新推荐文章于 2024-04-19 15:08:32 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/darr/p/5195494.html

本文详细介绍了jQuery中Deferred对象和Promise模式的应用，包括基本用法、过滤器、promise方法及$.when方法的使用，展示了如何利用这些技术进行高效异步编程。

promise:http://www.alloyteam.com/2014/05/javascript-promise-mode/

jQuery 中的 Deferred 和 Promises :

http://www.css88.com/archives/4750

 function getData(){
        var dtd = $.Deferred();
        $.ajax({
            url: "https://api.flightstats.com/flex/schedules/rest/v1/jsonp/flight/AA/100/departing/2013/10/4",
            type: 'GET',
            dataType: 'jsonp',
            data:{
            },
            crossDomain: true,
            success: function(res) {
                if (res) {
                    console.log(res);
                };
                dtd.resolve();
            }
        })
        return dtd;
    }
    function init(){
        getData().done(function(){
            console.log(1111);
        })
    }
    init();

function getData(){
        var promise = $.ajax({
            url: "https://api.flightstats.com/flex/schedules/rest/v1/jsonp/flight/AA/100/departing/2013/10/4",
            type: 'GET',
            dataType: 'jsonp',
            data:{
            },
            crossDomain: true
        })
        promise.done(function(){
            console.log(111);
        }).then(function(){
            console.log(222)
        }).then(function(){
            console.log(3333);
        })

    }

 function result(){
        $("#result").html("done")
    };
    function wait(){
        var dtd = $.Deferred();//Deferred（延迟）对象
        setTimeout(function(){
            dtd.resolve();
        },2000)
        return dtd;
    }
    wait().done(result);

promise对象

大多数情况下，我们不想让用户从外部更改deferred对象的状态。这时，你可以在deferred对象的基础上，返回一个针对它的promise对象。我们可以把后者理解成，promise是deferred的只读版，或者更通俗地理解成promise是一个对将要完成的任务的承诺。

jQuery的ajax() 方法返回的就是一个promise对象。此外，Animation类操作也可以使用promise对象。

 var deferred = $.Deferred();
    deferred.resolve("hello world!")
    deferred.done(function(value){
        alert(value);
    }).fail(function(value){
        alert("failed");
    }).then(function(){
        alert("then")
    })
    console.log(deferred.state());

$.when(
    $.ajax( "/main.php" ),
    $.ajax( "/modules.php" ),
    $.ajax( "/lists.php" )
).then(function (resp1, resp2, resp3){
    console.log(resp1);
    console.log(resp2);
    console.log(resp3);
});

deferred的几种用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>deferred使用实例</title>
    <script src="jquery.js"></script>

</head>
<body>
<button id="btn1">例一：基本用法</button>
<button id="btn2">例二：过滤器</button>
<button id="btn3">例三：promise方法</button>
<script>
    function show(str){
        $("body").append(str);
    }
    //基本用法
    $("#btn1").click(function(){
        var dtd = $.Deferred();
        dtd.done(function(){
            show("成功！");
        });
        setTimeout(function(){
            //这是一个耗时任务
            dtd.resolve();
        }, 2000)
    })
    //过滤器
    $("#btn2").click(function(){
        var defer = $.Deferred();
        var filtered = defer.then(function(value){
            return value*2;
        })
        defer.resolve(5);
        filtered.done(function(value){
            show("value is " + value);
        })
    })
    //实现promise方法
    $("#btn3").click(function(){
        var obj = {
            hello: function(name){
                show("您好" + name)
            }
        };
        var defer = $.Deferred();
        //return obj != null ? jQuery.extend( obj, promise ) : promise;
        defer.promise(obj);
        defer.resolve("ssss");
        obj.done(function(value){
            obj.hello(value);
        }).hello("aaaa");
    })
</script>
</body>
</html>

$.when()

jQuery的Deferred最好用的地方，就是模块化程度非常高，可以任意配合使用。

function task(name) {
  var dtd = $.Deferred();
  setTimeout(function() {
    dtd.resolve(name)
  }, 1000)
  return dtd;
}
$.when(task('任务一'), task('任务二')).done(function() {
  alert('成功')
})

把需要处理的异步操作，用Deferred对象给包装一下，然后通过when方法收集异步的操作，最后再返回出done的成功，这样的处理太赞了！

所以说，Deferred的引入，为处理事件回调提供了更加强大并且更灵活的编程模型。

转载于:https://www.cnblogs.com/darr/p/5195494.html