Javascript/jQuery：控制执行顺序（还没有 ajax/php）

Question

我花了几个小时在网上阅读有关在 Javascript/jQuery 中控制执行顺序的帖子，但我仍然不明白。

我正在尝试编写代码来显示网页上幕后 javascript 的执行进度。我有一个 jsfiddle (http://jsfiddle.net/wlandau/9sbu9myb/) 使用超时来完成此操作。 javascript是

var showProgress = function(x){
    $(".progress").hide();
    $(x).show();   
}

var step1 = function(){
    showProgress(".running");
};

var step2 = function(){
    for(var i = 0; i < 1000000000; ++i) 
        i = i + 1; 
};

var step3 = function(){
    showProgress(".done");
};

$(".begin").click(function(){
    step1();
    setTimeout(step2, 0);
    setTimeout(step3, 0);
});

$(".clear").click(function(){
    $(".progress").hide();   
});

我最终将需要使用 ajax 和 php，并且我已经读到推荐的工具是 when/then、Deferred objects 和 Promise。所以我尝试了（http://jsfiddle.net/wlandau/an8moww6/），但是执行顺序错误。 （当 for 循环运行时，html 页面不会说“正在运行...”。）那个小提琴的 javascript 是

var showProgress = function(x){
    $(".progress").hide();
    $(x).show();   
}

var step1 = function(){
    var def = $.Deferred(); 
    showProgress(".running");
    return def.promise();
};

var step2 = function(){
    var def = $.Deferred(); 
    for(var i = 0; i < 1000000000; ++i) 
        i = i + 1; 
    return def.promise();
};

var step3 = function(){
    var def = $.Deferred(); 
    showProgress(".done");
    return def.promise();
};

var success = function(){
    console.log("success")   
};

var failure = function(){
    console.log("failure")   
};

$(".begin").click(function(){
    $.when(step1(), step2(), step3()).then(success, failure);
});

$(".clear").click(function(){
    $(".progress").hide();   
});

问题 1（第一小提琴）：当我在“$(".begin").click(function(){..}" 块中将“step1()”更改为“setTimeout(step1, 0)”时，执行顺序崩溃了，这是为什么呢？

问题 2（第二小提琴）：为什么当我尝试使用 when/then/Deferred/promise 时执行顺序错误？

问题 3（第二个小提琴）：为什么“成功”函数没有执行？我告诉它打印到控制台，但 Chrome 的 Javascript 控制台什么也没显示。

Answer 1

当我尝试使用 when/then/Deferred/promise（第二个小提琴）时，为什么时间错误？

因为您没有使用任何setTimeouts，所以有效地同步执行所有内容。浏览器在完成处理之前不会重新渲染屏幕，您只会看到最后出现Done。

使用 Promises/Deferreds 不会使您的代码异步！您必须自己处理：

function step…(){
    var def = $.Deferred(); 
    setTimeout(function() {
        …
    }, 0);
    return def.promise();
};

另外，一次调用step1(), step2(), step3()（然后将promise 传递给$.when 以等待全部解决）将并行运行异步函数，这不是您想要的。要链接它们，请使用

step1().then(step2).then(step3).then(success, failure);

为什么“成功”函数没有执行（第二个小提琴）？

因为你的承诺永远不会得到解决。当你完成你的异步任务后，你需要告诉 deferred （并且通常传递结果值）。您在代码中的承诺永远挂起，从不执行任何处理程序。

固定：

function step1() {
    var def = $.Deferred();
    setTimeout(function() {
        showProgress(".running");
        def.resolve();
    }, 0);
    return def.promise();
}

function step2() {
    var def = $.Deferred();
    setTimeout(function() {
       for(var i = 0; i < 1000000000; ++i) 
            i = i + 1;
        def.resolve();
    }, 0);
    return def.promise();
}

function step3() {
    var def = $.Deferred();
    setTimeout(function() {
       showProgress(".done");
        def.resolve();
    }, 0);
    return def.promise();
}

由于您的函数本质上不是异步的，您也可以选择立即执行操作，只输入setTimeout(def.resolve, 0) 并仅延迟处理程序；你也可以两者都做。