JQuery

Question

我不确定这是否真的可行，因为 load() 是一种异步方法，但我需要一些方法来基本上加载几个小页面，一次一个，将一些数据包含在他们通过 JavaScript，然后通过 Ajax 发送，这样我就可以把它放在我创建的数据库中。

基本上我从我的页面上得到这个，我将不得不遍历的所有 links 位于：

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');

到目前为止一切顺利。

现在，我必须将每个 link（只有整个页面的特定 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 中，然后我才能处理它的信息并将其发送到我的脚本。

所以我的问题是：是否有一些创造性的方法可以通过多个 link 进行迭代，加载它们，处理我的业务，然后完成它？如果没有，是否有同步替代加载，可以产生大致相同的效果？我知道它可能会完全阻塞我的页面，但我会接受它，因为该页面不需要我的任何输入。

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

Answer 1

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

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

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

但以上是为了万一你需要在一切都完成后做点什么。但是我不确定我是否正确理解了你的问题（再读一遍）。

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

那么你也可以使用javascript waterfall（库或者自己构建）来简单易用。在瀑布上，您可以一个接一个地定义异步函数完成后应该发生什么。

Answer 2

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

(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 3

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

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
}

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

JQuery - Looping a .load() inside a 'for' statement

javascript

ajax

load

for-loop