"Need help: Implementing a delay between each iteration of an AngularJS AJAX request loop. Suggestions

Question

"Need help: Implementing a delay between each iteration of an AngularJS AJAX request loop. Suggestions

I am trying to run a loop that makes 20-200 ajax requests, but I need to add a 10-second delay between each call in order not to overwhelm the google.maps.Geocoder. Since ajax requests are asynchronous, I want to call the next request only after the response from the previous one has succeeded. If the response comes too quickly, I still want the delay to happen.

This is the code that I have come up with so far:

 ...
 $scope.addressList = ....;
 $scope.taskCount = $scope.addressList.length;

 geoTaskLoopAsync();

 function geoTaskLoopAsync(){

    // decrease taskCount on success
     var geo = new google.maps.Geocoder();
    geocoder.geocode( {
    'address': address
        }, function(results, status) {
            $scope.$apply( function () {
                // do something with response

               if($scope.taskCurr <= $scope.taskCount){
                 $scope.taskCurr++;
                 return geoTaskLoopAsync();
               }

                return;
            });
        });

What should I do next?

Would it work if I added this:

 stop = $timeout(function() { 
         if($scope.taskCurr <= $scope.taskCount){               
            geoTaskLoopAsync();
        } else {
            $timeout.cancel(stop);
        }                
    }, 10000);

Or is there another way to approach this?

Thank you,

javascript ajax angularjs geocoding

Answer 1

Answer №1

If you're looking for an efficient way to handle asynchronous operations in JavaScript, utilizing promises and the $q service could be the perfect solution.

Let me illustrate how promises can be used in this scenario. By creating a delay service to manage the 10-second delay and a maps service for geocoding, both of which return promises, we can leverage $q.all() in the controller to ensure a precise timing between Google API calls.

angular.module( /* specify your module */ ).service('delay', ['$q', '$timeout', function ($q, $timeout) {
    return {
        start: function () {
            var deferred = $q.defer();
            $timeout(deferred.resolve, 10000);
            return deferred.promise;
        }
    };
}]);

angular.module( /* specify your module */ ).service('maps', ['$q', function ($q) {
    var geocoder = new google.maps.Geocoder();
    return {
        geocode: function (address) {
            var deferred = $q.defer();

            geocoder.geocode({
                'address': address
            }, function (results, status) {
                deferred.resolve(results);
                // Handle AJAX errors by rejecting the promise.
            });

            return deferred.promise;
        }
    };
}]);


angular.module( /* specify your module */ ).controller('geocodingController', ['delay', 'maps', '$q', function (delay, maps, $q) {
    var addresses = [/* List of addresses for geocoding */],
        addressIndex = 0,
        geocodeAddresses = function geocodeAddresses() {
            // Use $q.all to execute the callback after geocoding is complete and 10 seconds have elapsed.
            $q.all([delay.start(), maps.geocode(addresses[addressIndex])]).then(function (results) {
                addressIndex += 1;
                var geocodedData = results[1]; // Gained data from geocoding.

                // Process the results as needed.

                if (addressIndex < addresses.length) {
                    geocodeAddresses();
                }
            });
        };

    // Initiate the AJAX requests.
    geocodeAddresses();
}]);

Answer 2

If you're looking for an efficient way to handle asynchronous operations in JavaScript, utilizing promises and the $q service could be the perfect solution.

Let me illustrate how promises can be used in this scenario. By creating a delay service to manage the 10-second delay and a maps service for geocoding, both of which return promises, we can leverage $q.all() in the controller to ensure a precise timing between Google API calls.

angular.module( /* specify your module */ ).service('delay', ['$q', '$timeout', function ($q, $timeout) {
    return {
        start: function () {
            var deferred = $q.defer();
            $timeout(deferred.resolve, 10000);
            return deferred.promise;
        }
    };
}]);

angular.module( /* specify your module */ ).service('maps', ['$q', function ($q) {
    var geocoder = new google.maps.Geocoder();
    return {
        geocode: function (address) {
            var deferred = $q.defer();

            geocoder.geocode({
                'address': address
            }, function (results, status) {
                deferred.resolve(results);
                // Handle AJAX errors by rejecting the promise.
            });

            return deferred.promise;
        }
    };
}]);


angular.module( /* specify your module */ ).controller('geocodingController', ['delay', 'maps', '$q', function (delay, maps, $q) {
    var addresses = [/* List of addresses for geocoding */],
        addressIndex = 0,
        geocodeAddresses = function geocodeAddresses() {
            // Use $q.all to execute the callback after geocoding is complete and 10 seconds have elapsed.
            $q.all([delay.start(), maps.geocode(addresses[addressIndex])]).then(function (results) {
                addressIndex += 1;
                var geocodedData = results[1]; // Gained data from geocoding.

                // Process the results as needed.

                if (addressIndex < addresses.length) {
                    geocodeAddresses();
                }
            });
        };

    // Initiate the AJAX requests.
    geocodeAddresses();
}]);

"Need help: Implementing a delay between each iteration of an AngularJS AJAX request loop. Suggestions

Answer №1

Similar questions

Clickable list element with a button on top

jQuery button click event not registering

Storing data downloaded through Angular in a factory for safekeeping

Display or hide a div element when hovering over it, while also being able to select the text within

"Utilizing AngularJS for advanced filtering and searching functions, along with

The failure of the $getJSON function to execute properly

Is your blockui overlay failing to cover the entire page?

Tips for reformatting table row data into multiple rows for mobile screens using ng-repeat in Angular

Eliminating an element from an array without the need for iteration

Please replicate an element based on user input using Javascript

How can we use AJAX to incorporate a "like" feature?

Steps for Removing Multiple CSS Styles from an Element's Style:

Exploring the integration of Mariadb COLUMN_JSON data in JavaScript

The procedure of Change Detection and the specific moment when OnPush properties are verified

Guide to generating an iframe that is triggered by a button click with the help of jquery

What is the correct placement for the return next() statement within the Restify module in Node.js?

The startOf function in moment.js is functioning properly, however the endOf function is returning an

Collaborating on JavaScript files across different projects

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

Stop users from navigating back to index.html page on Cordova PhoneGap