javascript - 当一个或多个函数完成时调用一个函数

Question

我需要一些帮助...我在 javascript 中有 5 个函数，但我无法在前面的函数之后调用第五个函数。 我有一些这样的:

function one(){

}
function two(){

}
function three(){

}
function four(){

}
function five(){

}

这段代码，在其他函数之前执行函数“five()”。我希望 five() 仅在所有先前的功能完成后才执行。 我怎样才能做到这一点？

编辑: 这是我的电话

function callFunction(){
    one();
    two();
    three();
    four();
    five();
}

Answer 1

最好的解决方案是使用 promise 。异步进程的 promise 是非常容易的。你需要 Promise.all(iterable)。

The Promise.all(iterable) method returns a promise that resolves when all of the promises in the iterable argument have resolved, or rejects with the reason of the first passed promise that rejects.

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(function(values) { 
  console.log(values); // [3, 1337, "foo"] 
});

检查这个:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

如果你想要 IE 兼容性，你可以使用 q。

https://github.com/kriskowal/q

q 也有 .all 。

我为你写了这个例子:

/**
 * Example of Q.all usage
 * @author Georgi Naumov
 * gonaumov@gmail.com for contacts and
 * suggestions.
 */
var firstStep = (function () {
    var dfd = Q.defer();
    setTimeout(function () {
        console.log("first step  finished");
        dfd.resolve();
    }, 1000);
    return dfd.promise;
}());

var secondStep = (function () {
    var dfd = Q.defer();
    setTimeout(function () {
        console.log("second step  finished");
        dfd.resolve();
    }, 3000);
    return dfd.promise;
}());

Q.all([firstStep, secondStep]).then(function () {
    console.log('All done!');
});

console.log('全部完成!');将在所有 asinc 任务完成后执行。

这是 jsfiddle:

http://jsfiddle.net/drv4538t/3/

此解决方案与时间间隔无关。检查这个例子:

/**
 * Example of Q.all usage
 * @author Georgi Naumov
 * gonaumov@gmail.com for contacts and
 * suggestions.
 */

/**
 * This function is taken from:
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
 */
function getRandomIntInclusive(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var firstStep = (function () {
    var dfd = Q.defer();
    setTimeout(function () {
        console.log("first step  finished");
        dfd.resolve();
    }, getRandomIntInclusive(1000, 10000));
    return dfd.promise;
}());

var secondStep = (function () {
    var dfd = Q.defer();
    setTimeout(function () {
        console.log("second step  finished");
        dfd.resolve();
    }, getRandomIntInclusive(1000, 10000));
    return dfd.promise;
}());

Q.all([firstStep, secondStep]).then(function () {
    console.log('All done!');
});  

这是 jsfiddle:

http://jsfiddle.net/drv4538t/4/