Wait for AJAX to finish before continuing the loop in Javascript

Question

Wait for AJAX to finish before continuing the loop in Javascript

Is it possible to halt a loop until each AJAX request has returned for every 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);
         }                                                      
     });

     //code to pause the loop here

     ajax1.done(function (result) {
         //code to resume the loop here
     }); 
 }

javascript ajax

Answer 1

Answer №1

If you're looking to make asynchronous Ajax calls that execute successively without using a traditional for loop, consider implementing recursion instead.

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

To implement this logic, simply call doAjax(1, 5). This will ensure that each Ajax call from 1 to 5 is made only after the previous one has completed successfully.

Answer 2

If you're looking to make asynchronous Ajax calls that execute successively without using a traditional for loop, consider implementing recursion instead.

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

To implement this logic, simply call doAjax(1, 5). This will ensure that each Ajax call from 1 to 5 is made only after the previous one has completed successfully.

Answer 3

Answer №2

If you are working with ES6, you have the option to utilize 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);
}

(Keep in mind that this should be within an async function.)

Without using this syntax or similar features in JavaScript, you will need to adjust your code accordingly:

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

Answer 4

If you are working with ES6, you have the option to utilize 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);
}

(Keep in mind that this should be within an async function.)

Without using this syntax or similar features in JavaScript, you will need to adjust your code accordingly:

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

Wait for AJAX to finish before continuing the loop in Javascript

Answer №1

Answer №2

Similar questions

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

Rendering only anchor tags in a v-html element while excluding others and displaying them as strings can be achieved by implementing specific filtering logic

The code is functioning properly on both Codepen and JSFiddle

Locate the closest array index to ensure precise calculations

CSS- Strategically placing and centering images above specific keywords in (any) HTML content without disrupting the flow of text

Mapping with groups in JavaScript

Comparing Mongoose and MongoDB in Node.js: Weighing the Benefits of Each

Ways to retrieve form states within an ajax callback function

What is the best way to retrieve data from the next page in a Protractor test?

Adding an attribute during an ASP.NET onclick event: A step-by-step guide

Encountering a Javascript issue specifically in IE7 that is not present in Firefox

The Carousel Slider malfunctions when attempting to set up multiple carousels

Getting the value of a sibling select element when a button is clicked

Unable to show an image within the <div> element when hovering the mouse

The functionality of Ajax is currently disabled on the latest mobile Chrome browsers

Show only the selected option with jQuery's on change event and disable or remove the other options

Iterating through a set of HTML elements and making updates using a forEach loop

Transferring data from one function to another function

Using Vue.js: Creating a Custom Filter to Easily Filter Table Data

The Sortable feature is functional in all browsers except for Firefox