JQuery - 在“for”语句中循环 .load()答案

【问题标题】：JQuery - Looping a .load() inside a 'for' statementJQuery - 在“for”语句中循环 .load()
【发布时间】：2016-09-04 13:16:02
【问题描述】：

我不确定这是否真的可行，因为 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 语句的其余部分只是继续执行，并不真正关心让加载完成它的业务，因为加载是异步的。 alert('Inserted!'); 在我有机会加载第一页之前就被调用了。反过来，这意味着在我什至可以处理它的信息并将其发送到我的脚本之前，我只能将这些东西加载到我的 div 中。

所以我的问题是：是否有一些创造性的方法可以让我可以遍历多个链接、加载它们、与它们开展业务并完成它？如果没有，是否有同步替代加载，可以产生大致相同的效果？我知道它可能会完全阻塞我的页面，但我可以接受，因为该页面不需要我的任何输入。

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

【问题讨论】：

没有。您忘记提供 HTML。
在这种情况下，我认为这不会为我的特定问题提供背景信息。我已经单独测试了我的脚本上的所有内容，并且一切正常。我可以获取数据并将其输入我的数据库。我的问题不在于页面本身，而只是让“for”语句等待我的 .load() 回调函数结束，然后继续并增加它的 Iterator 变量。
您真的希望它们一个接一个地运行吗？或者他们可以一起异步运行吗？
我想你正在寻找这样的东西？ stackoverflow.com/a/21819961/1385672
他们绝对可以同时运行所有我关心的。我的问题是它们需要先加载到我的页面中，以便我可以通过 Javascript 访问我需要的数据。这有点限制我一次只做一个（加载页面-> 获取数据-> 发送数据- > 加载另一个页面 -> 获取数据 -> 发送数据 -> ...)，我想？如果有替代方案，那么我会全力以赴。

标签： javascript jquery ajax for-loop load

【解决方案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);

【讨论】：

经过一些小的调整后，这绝对是一种魅力！它促使我查找递归函数是什么。非常感谢！

【解决方案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
}

【讨论】：

不幸的是，由于它们都在特定的 div 上使用 .load()，所以我不能一次全部使用它们。它必须加载一个，获取数据，然后移动到另一个，冲洗并重复。一次加载所有这些将不允许我从加载的页面中获取我需要的数据 c: 无论哪种方式，这已经解决了，我正在使用它制作的项目已经完成。不过，感谢您的建议，并在您到达电脑后继续发布代码，不胜感激！虽然我不能在这个项目中使用它，但这绝对是我很快就会看到自己使用的东西o：

【解决方案3】：

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

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

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

但以上所有内容都是为了在一切完成后您需要做某事。但是我不确定我是否正确理解了您的问题（请再读一遍）。

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

然后您还可以使用 javascript 瀑布（库或构建您自己的）使其简单易用。在瀑布图上，您可以一一定义异步功能完成时应该发生的情况。

【讨论】：