如何顺序调用延迟函数？

Question

我的代码:

<?php
if(isset($_GET['m'])) {
    $m = $_GET['m'];
    sleep($m);
    print "done, m=$m";
    die;
}
?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>

    function w(s) {
        document.body.innerHTML = document.body.innerHTML+ "<br>" + s
    }

    function aaa(def) {
        w("begin aaa");
        $.ajax({
            type: "GET",
            data: {
                m: 5
            }
        }).done(function(html) {
            w(html);
            def.resolve();
        });
    }


    function bbb(def) {
        w("begin bbb");
        $.ajax({
            type: "GET",
            data: {
                m: 1
            }
        }).done(function(html) {
            w(html);
            def.resolve();
        });
    }

    $(function() {

        $.when(
            $.Deferred(function(d) { aaa(d) }).promise(),
            $.Deferred(function(d) { bbb(d) }).promise()
        ).done(function() {
            w("OK")
        });
    })
</script>

我期待第二个函数等待第一个函数完成,也就是说,我的输出应该是

begin aaa
   <--pause
done, m=1
begin bbb
   <--pause
done, m=5
OK

相反,我得到了

begin aaa
begin bbb
   <--pause
done, m=1
   <--pause
done, m=5
OK

我想我误解了一些关于推迟如何工作的基本信息 - 任何人都可以解雇一下吗？

Answer 1

如果它们之间没有依赖关系,您如何期望它们按顺序执行？$.when没有也不会对承诺的评估产生影响,它只是等待每个承诺得到解决.

你的代码比它需要的更复杂.$.ajax已经返回一个在收到Ajax响应时得到解决的promise,所以你可以从函数中返回它.如果要按顺序执行它们,可以通过.then以下方式链接它们:

这些过滤器函数可以返回一个新值以传递给promise .done()或者.fail()回调,或者它们可以返回另一个可观察对象(Deferred,Promise等),它将其已解析/拒绝的状态和值传递给promise的回调.

所以你的代码简化为:

function aaa() {
    w("begin aaa");
    return $.ajax({
        type: "GET",
        data: {
            m: 5
        }
    }).done(w);
}


function bbb() {
    w("begin bbb");
    return $.ajax({
        type: "GET",
        data: {
            m: 1
        }
    }).done(w);
}

aaa().then(bbb).done(function() { w('ok'); });

在这里,aaa().then(bbb)创建您需要的依赖项.它基本上意味着"曾经aaa的承诺得到解决,执行bbb".此外,.then返回一个新的promise,当promise返回的promise被解析时,它会bbb被解析,这允许你在两者的promises中执行一个函数aaa并bbb得到解决.

也许这些可以帮助您更好地理解承诺(和延期):

• 推迟与承诺
• http://learn.jquery.com/code-organization/deferreds/

示例没有$.ajax:

function aaa() {
    var def = new $.Deferred();
    setTimeout(function() {
        def.resolve(21);
    }, 3000);
    return def.promise();
}

function bbb(v) {
    var def = new $.Deferred();
    setTimeout(function() {
        def.resolve(v * 2);
    }, 1000);
    return def.promise();
}

// aaa -> bbb -> console.log
// The value is logged after 3 + 1 seconds
aaa().then(bbb).done(function(v) { console.log(v); }); // 42

// (aaa | bbb) -> console.log
// The value is logged after max(3, 1) seconds and both resolved values are
// passed to the final promise
$.when(aaa(), bbb(5)).done(function(v) { console.log(v); }); // [21, 10]