我有一个简单的一维数组,比方说:
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 循环并等待函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12359450/