Question

我收到了这段代码：

'use strict';

var total = 0;

console.log("Start of program - total is now: " + total);

setTimeout(function() {
    console.log("function 1");
    total += 10;
}, 500);


setTimeout(function() {
    console.log("function 2");
    total += 50;
}, Math.floor(Math.random() * 1000));


setTimeout(function() {
    console.log("function 3");
    total += 100;
}, Math.floor(Math.random() * 1000));


console.log("End of progam - total is now: " + total);

如果只执行上面的所有超时，我将如何运行最后一个console.log？

Answer 1

有几种方法可以解决这个问题。我建议，如果你有时间，请查看Promises，并使用Promise.all（）。

但是，如果你只是坚持使用vanilla回调，我会用以下内容替换console.log：

var countTimeoutsFinished = 0;
function testEndOfProgram() {
    if(countTimeoutsFinished === 3) {
        console.log("End of program - total is now: " + total);
    }
}

然后，在每个超时内，递增countTimeoutsFinished并调用testEndOfProgram（）：

setTimeout(function() {
    console.log("function 1");
    total += 10;
    countTimeoutsFinished++;
    testEndOfProgram();
}, 500);

。当第3个超时完成时，countTimeoutsFinished将为3，然后当你进入testEndOfProgram时，console.log将执行。

Answer 2

你可以使用承诺，如凯尔所说。

使用jQuery运行示例（只是为了简化，您可以使用任何Promise库）

var total = 0;

console.log("Start of program - total is now: " + total);

var dfd1 = new jQuery.Deferred();
setTimeout(function() {
    console.log("function 1");
    total += 10;
    dfd1.resolve();
}, 500);


var dfd2 = new jQuery.Deferred();
setTimeout(function() {
    console.log("function 2");
    total += 50;
    dfd2.resolve();
}, Math.floor(Math.random() * 1000));


var dfd3 = new jQuery.Deferred();
setTimeout(function() {
    console.log("function 3");
    total += 100;
    dfd3.resolve();
}, Math.floor(Math.random() * 1000));

$.when.apply($, [dfd1, dfd2, dfd3])
.done(function() {
   alert("End of progam - total is now: " + total); 
});

小提琴：http://jsfiddle.net/3r0ydxg5/

在使用随机超时完成多个功能后，如何运行语句？

2 个答案: