Perform two separate sets of asynchronous calls with a pause in between each series

Question

Perform two separate sets of asynchronous calls with a pause in between each series

I am in need of creating a sequence of AJAX requests to different URLs, and only after all of them have completed I need to initiate another set of calls. This is the code I have written so far:

(function (delay) {
    var tasksToDo = 10,
    currentTask = 0;
    var process = setInterval(function() {
        // make a call
        // blahblahblah
        // then:
        if(currentTask === tasksToDo) {
            clearInterval(process);
        } else {
            currentTask++;
        }
    }, delay);
})(2000);
// The same pattern repeats for the second series, but it will execute immediately due to being asynchronous.

The reason I have structured my code like this instead of using a simple for loop is because I require a pause between each request. The second set of calls cannot begin until the first set is complete, as the URLs needed for the second set are obtained from the completion of the first set; therefore, I cannot merge all the calls into the same self-calling function. It is crucial for the second series to start executing only after the first series has finished.

javascript ajax asynchronous

Answer 1

Answer №1

If you're working with jQuery, utilizing promises can help achieve this task efficiently:

$.when( // initiating first group
    $.ajax({}),
    $.ajax({})
).then(function(){ // executing second group
    $.ajax({});
    $.ajax({});
});

Answer 2

If you're working with jQuery, utilizing promises can help achieve this task efficiently:

$.when( // initiating first group
    $.ajax({}),
    $.ajax({})
).then(function(){ // executing second group
    $.ajax({});
    $.ajax({});
});

Answer 3

Answer №2

In order to ensure the second series of code is only executed after the first series is complete, we can implement the following pseudocode:

(function (delay) {
    var tasks = 10, 
    currentTask = 0,
    tasksCompleted = 0; 
    process = setInterval(function() {
        // Set up a task
        [...]
        // Create a callback that increments tasksCompleted upon completion
        [...]
        // Execute the task
        [...]
        // Check if all tasks are done
        if(currentTask === tasks) {
            clearInterval(process);

            (function(delay2) {
                // Periodically check if all tasks are completed
                var checkCompletion = setInterval(function() {
                    if (tasksCompleted === tasks) {
                        clearInterval(checkCompletion);
                        // Start executing the second series of tasks
                        [...]
                    }
                }, delay2);
            })(1000); 
        } else {
            currentTask++;
        }
    }, delay);
})(2000);

Answer 4

In order to ensure the second series of code is only executed after the first series is complete, we can implement the following pseudocode:

(function (delay) {
    var tasks = 10, 
    currentTask = 0,
    tasksCompleted = 0; 
    process = setInterval(function() {
        // Set up a task
        [...]
        // Create a callback that increments tasksCompleted upon completion
        [...]
        // Execute the task
        [...]
        // Check if all tasks are done
        if(currentTask === tasks) {
            clearInterval(process);

            (function(delay2) {
                // Periodically check if all tasks are completed
                var checkCompletion = setInterval(function() {
                    if (tasksCompleted === tasks) {
                        clearInterval(checkCompletion);
                        // Start executing the second series of tasks
                        [...]
                    }
                }, delay2);
            })(1000); 
        } else {
            currentTask++;
        }
    }, delay);
})(2000);

Answer 5

Answer №3

The choice to use this structure as opposed to a basic for loop is driven by the need for pauses between each operation. It's essential that the second series does not begin until the first series has been completed and I have obtained the necessary URLs for the second set of operations. This prevents me from simply bundling all calls into a continuous self-invoking function. The execution of the second series must be delayed until the first series has concluded.

Is there an alternative to implementing delays for achieving desired outcomes? Consider integrating Promise.all()

var requests = [function doAsyncStuff1() {}, function doAsyncStuff2() {}];

var res = Promise.all(requests.map(function(request) {
  return request()
}));

res.then(function success(data) {
  // handle data from `doAsyncStuff1` , `doAsyncStuff2`
}, function error(err) {
  // process and log any encountered errors
  console.log(err)
});

Answer 6

The choice to use this structure as opposed to a basic for loop is driven by the need for pauses between each operation. It's essential that the second series does not begin until the first series has been completed and I have obtained the necessary URLs for the second set of operations. This prevents me from simply bundling all calls into a continuous self-invoking function. The execution of the second series must be delayed until the first series has concluded.

Is there an alternative to implementing delays for achieving desired outcomes? Consider integrating Promise.all()

var requests = [function doAsyncStuff1() {}, function doAsyncStuff2() {}];

var res = Promise.all(requests.map(function(request) {
  return request()
}));

res.then(function success(data) {
  // handle data from `doAsyncStuff1` , `doAsyncStuff2`
}, function error(err) {
  // process and log any encountered errors
  console.log(err)
});

Answer 7

Answer №4

$http methods return a promise. Utilize the then callbacks to initiate the next ajax request. This involves utilizing the $q service, Angular's promise service, so ensure it is injected into your controller/factory/directive.

var app = angular.module("app",[]);

app.controller("MainCtrl",["$scope","$q","$http",function($scope,$q,$http){
  $scope.log = [];

  //Commence requests for the subsequent set of urls
  function nextSet(urls){
     var deferreds = urls.map(function(url){
         $scope.log.push("Starting url: "+url);
         return $http.get(url);
     });

     //$q.all takes an array of deferreds and will be fulfilled when 
     //all of them resolve.
     return $q.all(deferreds);
  }

  var urlSets = [ 
     [ "https://cors-test.appspot.com/test?1",
       "https://cors-test.appspot.com/test?2" ], 
     [ "https://cors-test.appspot.com/test?3",
       "https://cors-test.appspot.com/test?4",
       "https://cors-test.appspot.com/test?5"] ];
  var dataSets = [];
    
  //The main deferred
  var deferred = $q.defer();

  //Iterate through the sets, chaining 'then'
  //This will effectively create a queue
  //Each chained 'then' callback executes after
  //each set of requests have resolved
  var promise = urlSets.reduce(function(promise,urlSet){

     //return promise for use in the next iteration
     return promise
       
       //Chain the nextSet call, binding the urlSet to the call
       .then(nextSet.bind(null,urlSet))
       
       //An additional chain to indicate completion of previous call
       //Could be used for special processing after fetching each set
       .then(function(dataSet){
         $scope.log.push("Set Finished: "+urlSet.join(","));
         dataSets.push(dataSet);
         return dataSets;
       });

  },deferred.promise);

  //Final 'then' callback triggered upon resolution of all sets
  promise.then(function(dataSets){
    //All operations complete
    $scope.log.push("All done");
    
    //dataSets contains all fetched data from urls
    //it's an array with indexes correlating with urlSets indexes
    console.log(dataSets);
  });
  
  //Start the process
  deferred.resolve();      
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="line in log">
      {{line}}
    </li>
   </ul>
</div>

This code expects all URLs to resolve successfully. If any requests fail, subsequent operations will halt. To continue processing even if some requests fail, adjust the code accordingly.

Learn more about Angular's $q service

Answer 8

$http methods return a promise. Utilize the then callbacks to initiate the next ajax request. This involves utilizing the $q service, Angular's promise service, so ensure it is injected into your controller/factory/directive.

var app = angular.module("app",[]);

app.controller("MainCtrl",["$scope","$q","$http",function($scope,$q,$http){
  $scope.log = [];

  //Commence requests for the subsequent set of urls
  function nextSet(urls){
     var deferreds = urls.map(function(url){
         $scope.log.push("Starting url: "+url);
         return $http.get(url);
     });

     //$q.all takes an array of deferreds and will be fulfilled when 
     //all of them resolve.
     return $q.all(deferreds);
  }

  var urlSets = [ 
     [ "https://cors-test.appspot.com/test?1",
       "https://cors-test.appspot.com/test?2" ], 
     [ "https://cors-test.appspot.com/test?3",
       "https://cors-test.appspot.com/test?4",
       "https://cors-test.appspot.com/test?5"] ];
  var dataSets = [];
    
  //The main deferred
  var deferred = $q.defer();

  //Iterate through the sets, chaining 'then'
  //This will effectively create a queue
  //Each chained 'then' callback executes after
  //each set of requests have resolved
  var promise = urlSets.reduce(function(promise,urlSet){

     //return promise for use in the next iteration
     return promise
       
       //Chain the nextSet call, binding the urlSet to the call
       .then(nextSet.bind(null,urlSet))
       
       //An additional chain to indicate completion of previous call
       //Could be used for special processing after fetching each set
       .then(function(dataSet){
         $scope.log.push("Set Finished: "+urlSet.join(","));
         dataSets.push(dataSet);
         return dataSets;
       });

  },deferred.promise);

  //Final 'then' callback triggered upon resolution of all sets
  promise.then(function(dataSets){
    //All operations complete
    $scope.log.push("All done");
    
    //dataSets contains all fetched data from urls
    //it's an array with indexes correlating with urlSets indexes
    console.log(dataSets);
  });
  
  //Start the process
  deferred.resolve();      
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="line in log">
      {{line}}
    </li>
   </ul>
</div>

This code expects all URLs to resolve successfully. If any requests fail, subsequent operations will halt. To continue processing even if some requests fail, adjust the code accordingly.

Learn more about Angular's $q service

Perform two separate sets of asynchronous calls with a pause in between each series

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How do I dynamically adjust class names for menu items as I scroll using jQuery?

View the gathered HTML content in a fresh browser tab

Leveraging server-sent events to retrieve an array from a MySQL database using PHP

Looking for answers about JavaScript and SharePoint?

The validation functionality in AngularJS for a form within an ng-repeat loop is not functioning as intended

Developing an npm module that is compatible with both web browsers and Node.js

Preventing the Spread of JavaScript Promises

Tips for retaining input field content within a BootstrapVue table

What is the best way to include a context in a JavaScript promise?

javascript The unchecking of a checkbox is not functioning

Utilizing the js-yaml library to parse a YAML document

When I integrate the Google map on my website, it appears to be fully zoomed out by default. However, if you access the map directly through the link provided, it

Application unable to save data to file with no indication in error logs

The directive 'templateUrl' points to the route '/'

animations are not triggering when using ng-click inside ng-repeat, is there a reason why the event is not firing?

Checking the alignment of a label or element in the center of a webpage using javascript

default selection in AngularJS select box determined by database ID

get JSON information according to user input/prompt

Converting the basic logic from if-else statements to foreach loops was unsuccessful

How to choose the desired day within a specific month when creating a calendar from scratch?