Looping through multiple Ajax requestsIn this scenario, we need

Question

Looping through multiple Ajax requestsIn this scenario, we need

Here's the snippet of code I'm working with:

for (var i = 0; i < 20; i++) {
$.ajax({
    type: "GET",
    async: false,
    url: "/MyController/MyMethod",
    success: function (data) {
        if (i == 0) {
            $('#result_progress').hide();
            $('#result_msg').hide();
            $('#details').show();
        } else if (i == 1) {
            $.ajax({
            type: "GET",
            async: true,
            url: "/Import/Finish",
            success: function (data) {
                    ....                        
            });                                            
        }
        if (i < 2) {
            $('#details').html($('#details').html() + 'someText'));
        }                                        
    }
});

}

I'm facing issues with using async: false as it causes my browser to stop functioning. Can anyone suggest an alternative solution?

jquery ajax

Answer 1

Answer №1

The issue you are facing is that the variable i holds the end value of the loop when the callbacks run.

To solve this, a common approach is to introduce an immediately invoked function expression to maintain the correct value of i:

for (var i = 0; i < 20; i++) {
   (function(i){
      ... your code
   })(i);
}

By calling the function within the loop, a new scope is created in which i is distinct from the outer variable.

Answer 2

The issue you are facing is that the variable i holds the end value of the loop when the callbacks run.

To solve this, a common approach is to introduce an immediately invoked function expression to maintain the correct value of i:

for (var i = 0; i < 20; i++) {
   (function(i){
      ... your code
   })(i);
}

By calling the function within the loop, a new scope is created in which i is distinct from the outer variable.

Answer 3

Answer №2

I believe implementing some closure would be beneficial:

function createRequest(index){
   return function(){
      $.ajax({
        type: "GET",
        async: true,
        url: "/MyController/MyMethod",
        success: function (data) {
           if (index == 0) {
              $('#result_progress').hide();
              $('#result_msg').hide();
              $('#details').show();
           } else if (index == 1) {
              $.ajax({
                type: "GET",
                async: true,
                url: "/Import/Finish",
                success: function (data) {
                    ....                        
                });                                            
           }
           if (index < 2) {
               $('#details').html($('#details').html() + 'someText'));
           }                                        
       }
     });
   }
}

for (var i = 0; i < 20; i++) {
    createRequest(i);
}

A potential solution is to utilize a function that retains the value of the index variable in each iteration of the loop by creating a new execution context.

Answer 4

I believe implementing some closure would be beneficial:

function createRequest(index){
   return function(){
      $.ajax({
        type: "GET",
        async: true,
        url: "/MyController/MyMethod",
        success: function (data) {
           if (index == 0) {
              $('#result_progress').hide();
              $('#result_msg').hide();
              $('#details').show();
           } else if (index == 1) {
              $.ajax({
                type: "GET",
                async: true,
                url: "/Import/Finish",
                success: function (data) {
                    ....                        
                });                                            
           }
           if (index < 2) {
               $('#details').html($('#details').html() + 'someText'));
           }                                        
       }
     });
   }
}

for (var i = 0; i < 20; i++) {
    createRequest(i);
}

A potential solution is to utilize a function that retains the value of the index variable in each iteration of the loop by creating a new execution context.

Answer 5

Answer №3

Here's the solution I came up with:

function executeLoop(index, totalLoops, startingPoint) {
    if(index >= totalLoops) return;

    $.ajax({
        type: "GET",
        async: false,
        url: "/MyController/MyMethod",
        success: function(response) {        
            // Execute some code here
            executeLoop(++index, totalLoops, startingPoint);
            // More code execution                                     
        }
    });
}

Answer 6

Here's the solution I came up with:

function executeLoop(index, totalLoops, startingPoint) {
    if(index >= totalLoops) return;

    $.ajax({
        type: "GET",
        async: false,
        url: "/MyController/MyMethod",
        success: function(response) {        
            // Execute some code here
            executeLoop(++index, totalLoops, startingPoint);
            // More code execution                                     
        }
    });
}

Looping through multiple Ajax requestsIn this scenario, we need

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to generate and transmit a text file using XmlHttpRequest or $.ajax?

What steps should I take to show the content on different menu selections?

Error in Dimplejs: Line is not visible when series is empty

Is it possible to toggle between thumbnails and a larger image in a jQuery gallery?

Having trouble with accessing controls within an UpdatePanel?

Solving the jQuery Enigma: Why the If Statement Fails to Execute

Utilizing Express.js and AJAX to transfer JSON data from the server to the client

Enhance the appearance of div elements in GWT/HTML with custom styling

Acquiring the index of a selector event within a list of dynamic elements

How can AJAX be utilized with both file and text inputs?

I am experiencing an issue where my JavaScript code does not redirect users to the next page even

Each time the toggle is switched, an additional AJAX request is sent to the PHP document

Tips for efficiently sending multiple ajax requests

"Implement a feature that allows users to click on an image in a queue using

What is the process of importing a JSON file in JavaScript?

Initiate an AJAX request within an existing AJAX request

Azure webhosting blocks the use of AJAX calls

JavaScript Alert function doesn't wait for execution

When utilizing crispy-forms in Django, I've noticed that sometimes, after the first click of the submit button, rendering failures occur. Strangely, the second time I

Having trouble selecting an element by name that contains a specific string followed by [..] using jQuery