за каждый + запрос ajax + задержка

Question

Так что я отчаянно пытался добиться этого, но у меня больше нет надежды, и я был бы признателен за помощь. Я подведу итог этой идеей несколькими строчками, и я уверен, что вы поймете.

$(".el").each(function(){ 
    console.log("starting"); 
    // $.ajax GET request 
    // console.log($.ajax response) 
    // delay of 3 seconds 
    console.log("finished, moving on."); 
    // next 
}); 

Предполагая, что у нас есть 3 элемента, результат выглядит следующим образом:

starting 
finished, moving on. 
starting 
finished, moving on. 
starting 
finished, moving on. 
XHR finished loading: GET "http://localhost/data.json". 
XHR finished loading: GET "http://localhost/data.json". 
XHR finished loading: GET "http://localhost/data.json". 

Я тону с этими запросами AJAX, и я не могу получить что-нибудь работу. Я хочу, чтобы все это работало асинхронно.

Answer 1

Я думаю, что со всеми моими попытками я просто усложнил ситуацию больше, чем они. Я отправляю свое решение на случай, если кому-то это понадобится.

$('.el').each(function(i){ 
    setTimeout(function(){ 
     console.log("starting now..",i); 
     $.ajax({ 
      method: "GET", 
      async: false, 
      url: "http://" 
     }) 
     .done(function(msg) { 
      console.log(msg); 
     }); 

     console.log("ended. moving on to next element"); 
    },1000*i); 
}); 

Answer 2

Обычная картина для этого является использование асинхронного Ajax, а затем делать вручную итерации, где вы управляете при запуске следующей итерации:

function runIt() { 
    var items = $(".el"); 
    var cntr = 0; 

    function next() { 
     if (cntr < items.length) { 
      console.log("starting now..",cntr); 
      // do something with items.eq(cntr) 
      $.ajax({ 
       method: "GET", 
       async: true, 
       url: "http://..." 
      }).then(function() { 
       console.log("finished, moving on."); 
       ++cntr; 
       setTimeout(next, 3000); 
      }); 
     } 
    } 
    next(); 
}