Javascript - Pause loop until AJAX completes

Question

I have a loop that fires off AJAX requests, is it possible to pause the loop until the AJAX has returned for each iteration?

 for (var i = 0; i < 5; i++) {

     var data = "i=" + 1;
     var ajax = $.ajax({
         url: '/ajax.php',
         type: 'post',
         data: data,
         success: function(result)
         {
           //alert(result);
         }                                                      
     });

     //pause the for loop here

     ajax1.done(function (result) {
         //continue the for loop
     }); 
 }

why are you using it in loop

Arsalan Akhtar
– Arsalan Akhtar

2018-05-25 10:44:12 +00:00
Commented May 25, 2018 at 10:44 — Arsalan Akhtar
– Arsalan Akhtar, Commented May 25, 2018 at 10:44

Tirth Shah · Accepted Answer · 2018-05-25 10:53:03Z

1

You want the Ajax calls to be asynchronous but also execute successively. Instead of a for loop, you can use recursion.

doAjax (index, maxNumber) {

     var data = "i=" + index;
     var ajax = $.ajax({
         url: '/ajax.php',
         type: 'post',
         data: data,
         success: function(result)
         {
           //alert(result);
         }                                                      
     });
     ajax1.done(function (result) {
         if(index<=maxNumber){
               doAjax(index + 1, maxNumber);
     });
}

You can call this as doAjax(1, 5) which will make all ajax calls from 1 to 5 after the previous one is over.

edited May 25, 2018 at 10:53

answered May 25, 2018 at 10:51

Tirth Shah

6244 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aurea · Accepted Answer · 2018-05-25 10:58:05Z

0

In ES6 you can probably use the async / await syntax:

for (let i = 0; i < 5; i++) {
  let data = "i=" + i;
  let result = await $.ajax({
    url: '/ajax.php',
    type: 'post',
    data: data
  });
  console.log(result);
}

(This needs to be done in a async function though.)

Other than that there is no syntax in JS that would allow this, so you have to adapt your code:

function requestRange(start, end) {
  function request(i) {
    if (i >= end) return;
    let data = "i=" + i;
    let ajax = $.ajax({
      url: '/ajax.php',
      type: 'post',
      data: data
    });
    ajax.done(function (result) {
      console.log(result);
      request(i + 1);
    }); 
  }
  request(start);
}

requestRange(0, 5);

edited May 25, 2018 at 10:58

answered May 25, 2018 at 10:49

Aurea

8,0461 gold badge23 silver badges36 bronze badges

1 Comment

t.niese Over a year ago

The ajax functions already return a Promise/A+ compatible promise for jQuery 3.x . So using let data = await $.ajax( would already work.

Collectives™ on Stack Overflow

Javascript - Pause loop until AJAX completes

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related