JavaScript循环并等待函数

JavaScript Loop and wait for function

本文关键字：函数 等待 循环 JavaScript      更新时间：2023-09-26

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

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

我可以使用$.each()功能循环通过：

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

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

所以，如果我有这样一个函数：

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

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

如果您希望在加载下一个水果之前附加一个水果，那么您就无法按照现有方式构建代码。这是因为对于像$.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
    }
})();

浏览器中的Javascript是单线程的。直到它调用的函数返回，它才会继续。你不需要检查。

相关文章：