JavaScript循环并等待功能

时间:2012-09-10 21:04:41

标签: javascript jquery arrays function loops

我有一个简单的单维数组,让我们说:

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

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

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

但我正在调用另一个我需要完成的功能才能继续下一个项目。

所以,如果我有这样的功能:

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

在继续之前确定先前水果的最佳方法是什么?

2 个答案:

答案 0 :(得分:14)

如果您想在加载下一个水果之前添加一个水果,那么就无法按照您的方式构建代码。这是因为对于像$.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代码时),您也可以像这样使用asyncawait

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
    }

})();

答案 1 :(得分:1)

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