Question

为什么这段代码不起作用？

在加载步骤2之前应该等待步骤1加载。目前，步骤2首先激活。我正在使用mockjax来模拟Ajax调用。

$.mockjax({
    url: "/step1",
    responseTime: [3000, 4000],
    responseText: {
      status: "success",
      text: "Loading Step 1"
    }
});

$.mockjax({
    url: "/step2",
    responseTime: [100, 200],
    responseText: {
      status: "success",
      text: "Loading step 2"
    }
});


$.getJSON("/step1").then( function(response) {
    return  $("#message").html( "message: " + response.text );
})
.then(
    $.getJSON("/step2", function(response) {
            $("#message").html( "message: " + response.text );
    })                
)

Answer 1

getJSON step2首先触发，因为它有一个较短的延迟，你实际上同时触发了$ .getJSON＆＃39;

试试这个

$.getJSON("/step1").then( function(response) {
    return  $("#message").html( "message: " + response.text );
})
.then(
    function() { // added this
        $.getJSON("/step2", function(response) {
            $("#message").html( "message: " + response.text );
        })         
    } // and added this
)

Answer 2

接受的答案并不完全正确。它并没有真正链接承诺，因为：

$("#message").html( "message: " + response.text )

是同步函数，不返回promise。因此，返回它返回的值不会创建一个promise链。它适用于这个例子，但是当你添加越来越多的承诺时，你会遇到麻烦。

链接承诺的正确方法是返回承诺：

someFunction().then(function(){return promise}).then(function(){});

因此，对于您的示例，正确的链接方式是：

$.getJSON("/step1")
.then( function(response) {
    $("#message").html( "message: " + response.text );
    return $.getJSON("/step2"); // <-------------- return a promise!
})
.then(function(response){
    $("#message").html( "message: " + response.text );
})

Answer 3

更新：根据评论，$ .when（）在这里是不必要的，在寻找组合多个Promise时应该使用。

我建议使用when - jsFiddle示例here。

    server {
    listen               7888 default_server;

    root                 "/dev/testing/public";

    location / {
        index            index.html index.php;
    }

    location ~ \.php$ {
        try_files        $uri =404;
        fastcgi_pass     unix:/Applications/MAMP/Library/logs/fastcgi/nginxFastCGI.sock;
        fastcgi_param    SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include          fastcgi_params;
    }
}

jQuery延迟对象链失败

3 个答案: