Javascript 如何按顺序调用延迟函数？_Javascript_Jquery_Jquery Deferred

Javascript 如何按顺序调用延迟函数？

javascript jquery

Javascript 如何按顺序调用延迟函数？,javascript,jquery,jquery-deferred,Javascript,Jquery,Jquery Deferred,我的代码： <?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) {

我的代码：

<?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>


功能w（s）{
document.body.innerHTML=document.body.innerHTML+“
”+s
}
功能aaa（def）{
w（“开始aaa”）；
$.ajax({
键入：“获取”，
数据：{
m:5
}
}).done（函数（html）{
w（html）；
def.resolve（）；
});
}
功能bbb（def）{
w（“开始bbb”）；
$.ajax({
键入：“获取”，
数据：{
m:1
}
}).done（函数（html）{
w（html）；
def.resolve（）；
});
}
$（函数（）{
美元。什么时候(
$.Deferred（函数（d）{aaa（d）}）.promise（），
$.Deferred（函数（d）{bbb（d）}）.promise（）
).done（函数（）{
w（“OK”）
});
})

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

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

开始aaa
如果它们之间没有依赖关系，您希望如何按顺序执行它们<代码>$。当

对承诺的评估没有影响，也不可能有影响时，它只会等待每个承诺得到解决

您的代码比需要的复杂得多<代码>$.ajax已经返回了一个承诺，该承诺在收到ajax响应时得到解决，因此您可以从函数返回它。如果要按顺序执行，可以通过以下方式链接它们：

这些筛选函数可以返回一个新值，并将其传递给承诺的

.done（）

或

.fail（）

回调，也可以返回另一个可观察对象（延迟、承诺等），该对象将其已解决/拒绝的状态和值传递给承诺的回调

因此，您的代码简化为：

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（）。然后（bbb）

创建所需的依赖项。它的基本意思是“一旦

aaa

的承诺得到解决，就执行

bbb

”。此外，

。然后

返回一个新的承诺，该承诺在

bbb

返回的承诺得到解决时得到解决，这允许您在

aaa

和

bbb

的承诺都得到解决时执行一个函数

也许这些有助于您更好地理解承诺（和延期）：

没有

$的示例。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]

如果它们之间没有依赖关系，您希望如何按顺序执行它们<代码>$。当对承诺的评估没有影响，也不可能有影响时，它只会等待每个承诺得到解决

这些筛选函数可以返回一个新值，并将其传递给承诺的

.done（）

或

.fail（）

回调，也可以返回另一个可观察对象（延迟、承诺等），该对象将其已解决/拒绝的状态和值传递给承诺的回调

因此，您的代码简化为：

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（）。然后（bbb）

创建所需的依赖项。它的基本意思是“一旦

aaa

的承诺得到解决，就执行

bbb

”。此外，

。然后

返回一个新的承诺，该承诺在

bbb

返回的承诺得到解决时得到解决，这允许您在

aaa

和

bbb

的承诺都得到解决时执行一个函数

也许这些有助于您更好地理解承诺（和延期）：

没有

$的示例。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]

$。when（）

不会对其参数施加任何顺序-它们实际上是一个“无序列表”

但是，

.done（）

，

.fail（）

和

。然后（）

执行命令

首先，通过修改

aaa（）

和

bbb（）

以返回

$.ajax（）.done（）

链返回的承诺兼容对象来简化操作，如下所示：

function aaa() {
    w("begin aaa");
    return $.ajax({
        type: "GET",
        data: { m: 5 }
    }).done(w);//without changing anything, w can be passed rather than called from an anonymous function.
}

function bbb() {
    w("begin bbb");
    return $.ajax({
        type: "GET",
        data: { m: 1 }
    }).done(w);//without changing anything, w can be passed rather than called from an anonymous function.
}

现在，要获得您想要的效果，请使用

.then（）

对

aaa

和

bbb

进行排序：

$(function() {
    aaa().then(bbb).done(function() {
        w("OK");
    });
});

我同意在这里执行

aaa

和传递

bbb

有点令人困惑，但这是一种非常常见的模式，您会一次又一次地遇到。最终它会有意义的

把<代码> AAA和<代码> BBB彼此相配，你可以写下类似的东西：

$(function() {
    $.Deferred().resolve().then(aaa).then(bbb).done(function() {
        w("OK");
    });
});

$。when（）