JavaScript 循环并等待函数

Question

我有一个简单的一维数组，比方说:

fruits = ["apples","bananas","oranges","peaches","plums"];

我可以使用 $.each() 函数循环:

$.each(fruits, function(index, fruit) {  
   showFruit(fruit);
});

但我正在调用另一个函数，我需要在继续下一个项目之前完成它。

所以，如果我有这样的函数:

function showFruit(fruit){
    $.getScript('some/script.js',function(){
        // Do stuff
    })
}

确保在继续之前已附加上一个水果的最佳方法是什么？

Answer 1

如果您希望在加载下一个水果之前附加一个水果，那么您就不能按照现有的方式构建代码。这是因为对于像 $.getScript() 这样的异步函数，没有办法让它等到完成后再继续执行。可以使用 $.ajax() 并将其设置为同步，但这对浏览器不利(它会在联网期间锁定浏览器)，因此不推荐这样做。

相反，您需要重构代码以异步工作，这意味着您不能使用传统的 for 或 .each() 循环，因为它们不会迭代异步。

var fruits = ["apples","bananas","oranges","peaches","plums"];

(function() {
    var index = 0;

    function loadFruit() {
        if (index < fruits.length) {
            var fruitToLoad = fruits[index];
            $.getScript('some/script.js',function(){
                // Do stuff
                ++index;
                loadFruit();
            });
        }
    }
    loadFruit();

})();

在 ES7 中(或转译 ES7 代码时)，您还可以像这样使用 async 和 await:

var fruits = ["apples","bananas","oranges","peaches","plums"];

(async function() {
    for (let fruitToLoad of fruits) {
        let s = await $.getScript('some/script.js');
        // do something with s and with fruitToLoad here
    }

})();