JavaScript循环并等待功能

Question

我有一个简单的一维数组，可以这样说：

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

我可以通过$.each()函数进行$.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
    }

})();

Answer 2

浏览器中的Javascript是单线程的。 在它调用的函数返回之前，它不会继续。 您不需要检查。