JQuery - 在 'for' 语句中循环 .load()

Question

我不确定这是否真的可行，因为load（）是一个异步方法，但我需要一些方法来加载页面的几个小部分，一次加载一个，通过JavaScript获取其中包含的一些数据，然后通过Ajax发送，这样我就可以把它放在我创建的数据库中。

基本上，我从我的页面上得到了这一点，在那里我必须迭代的所有链接都位于：

var digiList = $('.2u');
var link;
for(var i=0;i<digiList.length;i++){
    link = "http://www.digimon-heroes.com" + $(digiList).eq(i).find('map').children().attr('href');

到目前为止还不错。

现在，我必须将每个链接（只有整个页面的特定div，而不是整个页面）加载到页面周围的div中，这样我就可以通过JQuery:获得一些数据

 var contentURI= link + ' div.row:nth-child(2)';   
    $('#single').load('grabber.php?url='+ contentURI,function(){     
 ///////////// And I do a bunch of JQuery stuff here, and save stuff into an object 
 ///////////// Aaaand then I call up an ajax request.
     $.ajax({
      url: 'insertDigi.php',
      type: 'POST',
      data: {digimon: JSON.stringify(digimon)},
      dataType: 'json',
      success: function(msg){
        console.log(msg);
      }
 ////////This calls up a script that handles everything and makes an insert into my database.
    }); //END ajax
   }); //END load callback Function
  } //END 'for' Statement.
 alert('Inserted!'); 

当然，正如预期的那样，加载时间太长，for语句的其余部分只是继续执行，而不是真正关心让加载完成它的业务，因为加载是异步的。警报（"插入！"）在我有机会加载第一页之前就被调用了。反过来，这意味着我只能在处理它的信息并将其发送到我的脚本之前，将这些东西加载到我的div中。

所以我的问题是：有没有什么创造性的方法可以做到这一点，让我可以迭代多个链接，加载它们，用它们做我的生意，然后完成它？如果没有，是否有一种同步的负载替代方案，可以产生大致相同的效果？我知道它可能会完全阻塞我的页面，但我可以接受，因为页面不需要我的任何输入。

希望我用必要的细节解释了一切，希望你们能帮我解决这个问题。谢谢

Answer 1

您可能想要一个递归函数，它等待一次迭代，然后再进行下一次迭代等。

(function recursive(i) {
    var digiList = $('.2u');
    var link = digiList.eq(i).find('map').children().attr('href') + ' div.row:nth-child(2)';
    $.ajax({
        url: 'grabber.php',
        data: {
            url: link
        }
    }).done(function(data) {
        // do stuff with "data"
        $.ajax({
            url: 'insertDigi.php',
            type: 'POST',
            data: {
                digimon: digimon
            },
            dataType: 'json'
        }).done(function(msg) {
            console.log(msg);
            if (i < digiList.length) {
                recursive(++i); // do the next one ... when this is one is done
            }
        });
    });
})(0);

Answer 2

如果您希望它们一起运行，您可以使用闭包来保留循环中的每个数字

for (var i = 0; i < digiList.length; i++) {
    (function(num) { < // num here as the argument is actually i
        var link = "http://www.digimon-heroes.com" + $(digiList).eq(num).find('map').children().attr('href');
        var contentURI= link + ' div.row:nth-child(2)';   
        $('#single').load('grabber.php?url=' + contentURI, function() {
            ///////////// And I do a bunch of JQuery stuff here, and save stuff into an object 
            ///////////// Aaaand then I call up an ajax request.
            $.ajax({
                url: 'insertDigi.php',
                type: 'POST',
                data: {
                    digimon: JSON.stringify(digimon)
                },
                dataType: 'json',
                success: function(msg) {
                        console.log(msg);
                    }
                    ////////This calls up a script that handles everything and makes an insert into my database.
            }); //END ajax
        }); //END load callback Function
    })(i);// <-- pass in the number from the loop
}

Answer 3

您总是可以使用同步ajax，但没有充分的理由。

如果你知道需要下载的文档数量（你可以计算它们，或者如果它是恒定的，只进行硬编码），你可以在成功时运行一些回调函数，如果一切都完成了，那么继续使用需要所有文档的逻辑。

为了让它变得更好，你可以在下载所有内容时触发一个事件（在文档或任何其他对象上）（例如"downloads_done"），并监听它，甚至制作你需要制作的内容。

但以上都是为了防止一切都结束后你们需要做点什么。但是，我不确定我是否正确理解了你的问题（只要再读一遍）。

如果你想下载一些东西->用数据做一些事情->下载另一个东西->再做一些事情。。。

然后，您还可以使用javascript瀑布（库或构建自己的库）使其简单易用。在瀑布中，您可以逐个定义异步函数完成后应该发生的情况。