Javascript 停止代码，直到AJAX调用在$内完成。每个循环

我有一个函数，可以使用jQuery通过

AJAX

调用从外部文件加载HTML

这些ajax调用在

$中运行。每个

循环，我需要在循环继续之前完成此ajax调用。这是我的密码：

$('img').each(function(){
    var cotainer_html = $('.cotainer_html').clone();
    /* Get Image Content */
    $.ajax({
       url: '/assets/ajax/get_studio_image.php',
       type:'GET',
       success:function(data){
          cotainer_html.find('.replaceme').replaceWith(data);
       }
    });
});

---

我知道我可以设置

async:false

，但我听说这不是个好主意。有什么想法吗

要实现这一点，您可以将每个请求放入一个数组中，并将该数组应用到

$。试试这个：

var requests = [];
$('img').each(function(){
    var cotainer_html = $('.cotainer_html').clone();
    /* Get Image Content */
    requests.push($.ajax({
       url: '/assets/ajax/get_studio_image.php',
       type:'GET',
       success:function(data){
          cotainer_html.find('.replaceme').replaceWith(data);
       }
    }));
});

$.when.apply($, requests).done(function() {
    console.log('all requests complete');
});

请注意，您在每个请求上替换相同的内容，因此唯一对UI有影响的是最后一个请求。前面这些是多余的

还请注意，您应该永远不要使用
async:false。它会锁定浏览器的UI线程，直到请求完成，这使得用户觉得它好像崩溃了。这是一种可怕的做法。使用回调

OP似乎希望调用串联运行，而不是并行运行

如果是这种情况，您可以使用递归：

function makeRequest($els, index) {
    var cotainer_html = $('.cotainer_html').clone();
    $.ajax({
       url: '/assets/ajax/get_studio_image.php',
       type:'GET',
       success:function(data){
          cotainer_html.find('.replaceme').replaceWith(data);
          if ($els.eq(index + 1).length) {
              makeRequest($els, ++index);
          } else {
              console.log('all requests complete');
          }
       }
    });
}

makeRequest($('img'), 0);

要实现这一点，您可以将每个请求放入一个数组中，并将该数组应用到
$。试试这个：

var requests = [];
$('img').each(function(){
    var cotainer_html = $('.cotainer_html').clone();
    /* Get Image Content */
    requests.push($.ajax({
       url: '/assets/ajax/get_studio_image.php',
       type:'GET',
       success:function(data){
          cotainer_html.find('.replaceme').replaceWith(data);
       }
    }));
});

$.when.apply($, requests).done(function() {
    console.log('all requests complete');
});

请注意，您在每个请求上替换相同的内容，因此唯一对UI有影响的是最后一个请求。前面这些是多余的

还请注意，您应该永远不要使用
async:false。它会锁定浏览器的UI线程，直到请求完成，这使得用户觉得它好像崩溃了。这是一种可怕的做法。使用回调

OP似乎希望调用串联运行，而不是并行运行

如果是这种情况，您可以使用递归：

function makeRequest($els, index) {
    var cotainer_html = $('.cotainer_html').clone();
    $.ajax({
       url: '/assets/ajax/get_studio_image.php',
       type:'GET',
       success:function(data){
          cotainer_html.find('.replaceme').replaceWith(data);
          if ($els.eq(index + 1).length) {
              makeRequest($els, ++index);
          } else {
              console.log('all requests complete');
          }
       }
    });
}

makeRequest($('img'), 0);

可以使用伪递归循环：

var imgs = $('img').get();

var done = (function loop() {
    var img = imgs.shift();
    if (img) {
        var cotainer_html = $('.cotainer_html').clone();
        /* Get Image Content */
        return $.get('/assets/ajax/get_studio_image.php')
         .then(function(data) {
            cotainer_html.find('.replaceme').replaceWith(data);
        }).then(loop);
   } else {
       return $.Deferred().resolve();  // resolved when the loop terminates
   }
})();

这将获取列表中的每个元素，获取所需的图像，然后（）重新开始，直到什么都没有剩下

立即调用的函数表达式本身返回一个
承诺
，因此您可以链接一个
。然后（）
调用，该调用将在循环完成后调用：

done.then(function() {
    // continue your execution here 
    ...
});

可以使用伪递归循环：

var imgs = $('img').get();

var done = (function loop() {
    var img = imgs.shift();
    if (img) {
        var cotainer_html = $('.cotainer_html').clone();
        /* Get Image Content */
        return $.get('/assets/ajax/get_studio_image.php')
         .then(function(data) {
            cotainer_html.find('.replaceme').replaceWith(data);
        }).then(loop);
   } else {
       return $.Deferred().resolve();  // resolved when the loop terminates
   }
})();

这将获取列表中的每个元素，获取所需的图像，然后（）重新开始，直到什么都没有剩下

立即调用的函数表达式本身返回一个
承诺
，因此您可以链接一个
。然后（）
调用，该调用将在循环完成后调用：

done.then(function() {
    // continue your execution here 
    ...
});

async:false是最简单的方法。您也可以使用这个库：永远不要使用
async:false
它会锁定浏览器的UI线程，直到请求完成，这让用户觉得它已经崩溃了。这是一种可怕的做法。使用回调。@stackErr同步调用（webworkers之外）在中-一些浏览器已经记录了警告，规范已经允许他们尝试抛出错误-我不会编写任何使用它的新代码。可能重复@JamesThorpe谢谢！我不知道。刚刚删除了我的答案。async:false是最简单的方法。您也可以使用这个库：永远不要使用
async:false
它会锁定浏览器的UI线程，直到请求完成，这让用户觉得它已经崩溃了。这是一种可怕的做法。使用回调。@stackErr同步调用（webworkers之外）在中-一些浏览器已经记录了警告，规范已经允许他们尝试抛出错误-我不会编写任何使用它的新代码。可能重复@JamesThorpe谢谢！我不知道。刚刚删除了我的答案。OP似乎希望调用以串联方式运行，而不是以并行方式运行请注意，您的串行代码无法向调用方表明它已完成…这看起来很好，让我今天下午做一些测试，我会回来与您联系。@Rorymcrossan放入“console.log”行与允许异步正确使用函数不同；）OP似乎希望调用以串联方式运行，而不是以并行方式运行请注意，您的串行代码无法向调用方指示它已完成…这看起来很好，让我今天下午做一些测试，我会回来与您联系。@Rorymcrossan放入“console.log”行与允许异步正确使用函数不同；）这很有创意，我真的很喜欢。让我来玩玩，我会让你知道结果。这很有创意，我真的很喜欢。让我来玩玩，我会告诉你结果如何。