我有一个简单的单维数组,让我们说:
fruits = ["apples","bananas","oranges","peaches","plums"];
我可以使用$.each()
函数循环:
$.each(fruits, function(index, fruit) {
showFruit(fruit);
});
但我正在调用另一个我需要完成的功能才能继续下一个项目。
所以,如果我有这样的功能:
function showFruit(fruit){
$.getScript('some/script.js',function(){
// Do stuff
})
}
在继续之前确定先前水果的最佳方法是什么?
答案 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代码时),您也可以像这样使用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
}
})();
答案 1 :(得分:1)
浏览器中的Javascript是单线程的。在它调用的函数返回之前,它不会继续。你不需要检查。