Executing Recursive Functions in AngularJS with a Delay - A Step-by-Step Guide

Question

Executing Recursive Functions in AngularJS with a Delay - A Step-by-Step Guide

Here is a function that I have:

$scope.getContactsByScroll = function() {
  $scope.pageN = $scope.pageN + 1;
  if (!$scope.allDataIsLoaded){
    fetchMyDataService.getContactsByScrollService($scope.pageN).then(function(response) {
      if (response.length === 0){
        $scope.allDataIsLoaded = true;
      }
      else if (response.length !== 0 && !$scope.allDataIsLoaded){
        angular.forEach(response, function(el) {
          $scope.contacts.push(el);
        });
        //$timeout(function() {
          $scope.getContactsByScroll();
        //}, 2000);
      }
    }).catch(function() {
      $scope.allDataIsLoaded = true;
    });
  }
};

However, it calls itself multiple times even when $scope.allDataIsLoaded is set to false.

Setting a timeout seems to resolve the issue temporarily. Is there a way to delay the function without relying on a timeout?

javascript angularjs promise

Answer 1

Answer №1

Avoid using timeouts in asynchronous functions:

Exceeding the timeout may result in unnecessary requests.
A timeout longer than the request time can cause unnecessary delays.

Instead of timeouts, consider using a promise chain for recursive requests. You can try implementing something similar to this:

var asyncService = function ($timeout)
    {
        var someData = 10;
        var service =
            {
                FetchData: function (someArray)
                {
                    someData++;
                    //The timeout here is only for demonstration purposes
                    return $timeout(function () { return someData }, 1000)
                        .then(function (result)
                        {
                            return service.ProcessData(result, someArray);
                        });
                },
                ProcessData: function (data, someArray)
                {
                    console.log(data);
                    if (data == 15)
                    {
                        return someArray;
                    }
                    else
                    {
                        someArray.push(data)
                        return service.FetchData(someArray);
                    }
                }
            };
        return service;
    }

Check out this plunker link for a demonstration.

Answer 2

Avoid using timeouts in asynchronous functions:

Exceeding the timeout may result in unnecessary requests.
A timeout longer than the request time can cause unnecessary delays.

Instead of timeouts, consider using a promise chain for recursive requests. You can try implementing something similar to this:

var asyncService = function ($timeout)
    {
        var someData = 10;
        var service =
            {
                FetchData: function (someArray)
                {
                    someData++;
                    //The timeout here is only for demonstration purposes
                    return $timeout(function () { return someData }, 1000)
                        .then(function (result)
                        {
                            return service.ProcessData(result, someArray);
                        });
                },
                ProcessData: function (data, someArray)
                {
                    console.log(data);
                    if (data == 15)
                    {
                        return someArray;
                    }
                    else
                    {
                        someArray.push(data)
                        return service.FetchData(someArray);
                    }
                }
            };
        return service;
    }

Check out this plunker link for a demonstration.

Executing Recursive Functions in AngularJS with a Delay - A Step-by-Step Guide

Answer №1

Similar questions

Changing the background color of the canvas using Javascript

Deciphering basic XML with Javascript/Ajax

Redirecting with VueJS Router to a specific path on the server

"What is the best way to retrieve the value of an HTML input in

Dealing with spaces in Discord.js arguments can be tricky, but with the right

JavaScript code that retrieves the current exchange rate of Bitcoin (BTC)

Issue with ng-show not toggling visibility on ng-click event in AngularJS

Having trouble getting the mock module to work with mockImplementation

Youtube video embedding showing cut edges on smaller screens

What is the best way to handle dynamic URLs in Protractor testing?

Utilize an enum from a shared library by exporting it and incorporating it into a TypeScript project

Creating a function that uses setInterval to continuously update the input with a specific value

Have you ever found yourself in a situation where you must include 'javascript:' in an onclick event?

Ways to terminate session using ajax when input is empty; Notice of an undefined variable

Completing a submission on a bootstrap form, using innerHTML and displaying an alert

Error Encountered in MERN Stack Development: TypeError Thrown Due to Inability to Convert Undefined

The filterSelectedOptions feature in Material UI Lab's autocomplete does not seem to be functioning properly when used in conjunction

"Encountering an error retrieving weather forecast API in JavaScript - issue with

Setting up Requirejs in a separate file

Adding a button input and deleting non-functional parent elements