jQuery中的Deferred和promise

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

1

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的引入，为处理事件回调提供了更加强大并且更灵活的编程模型。

posted @ 2016-02-17 15:31  darr  阅读(399)  评论(0)  编辑  收藏  举报