JQuery - Looping a .load() внутри оператора 'for'

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

Естественно, как и следовало ожидать, загрузка занимает слишком много времени, а остальные заявления для просто продолжает идти до конца, на самом деле не заботясь о позволяя закончить нагрузки до этого дело, так как нагрузки является асинхронным. Предупреждение ('Вставить!'); вызывается, прежде чем я получаю возможность загрузить самую первую страницу. Это, в свою очередь, означает, что я только загружаю материал в свой 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

Вы всегда можете использовать синхронный аякс, но для этого нет веской причины.

Если вам известно количество документов, которые необходимо загрузить (вы можете считать их или просто жестко запрограммировать, если они постоянны), вы можете запустить некоторую функцию обратного вызова при успешном завершении, и если все будет сделано, тогда приступите к логике, которая потребует всех документов ,

Чтобы сделать это еще лучше, вы можете просто вызвать событие (на документе или любом другом объекте), когда все будет загружено (e.x. "downloads_done"), и послушайте это, даже чтобы сделать то, что вам нужно сделать.

Но все выше для случая, когда вам нужно что-то сделать, когда все будет сделано. Однако я не уверен, правильно ли понял ваш вопрос (просто прочитайте это снова).

Если вы хотите что-то скачать -> сделать что-то с данными -> скачать другое дело -> сделать что-то снова ...

Тогда вы можете также использовать яваскрипт водопад (библиотеку или создать свой собственный), чтобы сделать его Легко и просто использовать. На водопаде вы определяете, что должно произойти, когда асинхронная функция выполняется один за другим.

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 
}