Stopping the recursive function call in AngularJS

Question

Stopping the recursive function call in AngularJS

Utilizing the following function to retrieve users from a REST API, paginated by offset. Upon successful callback, the function recursively calls itself with a new offset to fetch the next set of users.

Issue: When I change or exit the view, the FetchAttendee-Function continues running until all users are fetched. However, for better performance, I want to halt the process of fetching users.

fetchAttendees(event_id, offset);

function fetchAttendees(event_id, offset) {
    AttendeeFactory(offset).show({id: event_id}, 
        function success(response) {
            [ DO SOMETHING WITH RESPONSE ]
            fetchAttendees(event_id, offset);
        }, 
        function (error) {
        });
}

Therefore, is it feasible to prevent the fetchAttendee-Function from being called when leaving the view Event?

$scope.$on("$ionicView.leave", function(scopes, states) {
    [ ...] 
});

AttendeeFactory

.factory('AttendeeFactory', function ($resource) {
    return function (offset) {
        return $resource('http://10.0.0.6:8000/backend/attendees/:id/', {}, {
            show: { method: 'GET', headers: {'attendee-offset': offset}, isArray: true }
        });
    };
})

javascript angularjs recursion ionic-framework

Answer 1

Answer №1

Below is a rough pseudo-code structure (not tested for your specific requirements)

// Controller implementation
app.controller('YourController', ['$scope', 'AttendeeFactory', function($scope, AttendeeFactory) {

    ...
    AttendeeFactory.fetchAttendees(event_id, offset);
    ...

}]);

// Listener for state change to pause attendee fetch
AttendeeFactory.pause();

// Service/Factor definition
app.factory('AttendeeFactory', function($resource) {
    var isPaused = true; 

    function fetchAttendees(event_id, offset) {
        isPaused = false;
        fetchAttendeesRecursive(event_id, offset);
    }

    function fetchAttendeesRecursive(event_id, offset) {
        if (!isPaused) {
            Attendee(offset).show(
                {id: event_id}, 
                function success(response) {
                    [ HANDLE RESPONSE HERE ]
                    fetchAttendees(event_id, offset);
                }, 
                function error() {}
           );
        }
    }

    function Attendee(offset) {
        return $resource(
            'http://10.0.0.6:8000/backend/attendees/:id/',
            {},
            {
                show: {
                    method: 'GET', 
                    headers: {'attendee-offset': offset}, 
                    isArray: true
                }
            }
        );
    }

    function pause() { isPaused = true; }

    return {
        fetchAttendees: fetchAttendees,
        pause: pause
    };
});

If the [HANDLE RESPONSE HERE] involves updating the view's scope, additional logic is needed to notify the controller of data changes.

You can utilize $rootScope, $on, and $emit to trigger a message from the service upon attendee fetch for the controller to listen and update accordingly. Here's a basic example:

// in the controller
$rootScope.$on("AttendeeFetchedEvent", function($event, data){
  // handle data updates here
});

// in the factory/service
$scope.$emit("AttendeeFetchedEvent", dataToSendToController);

Answer 2

Below is a rough pseudo-code structure (not tested for your specific requirements)

// Controller implementation
app.controller('YourController', ['$scope', 'AttendeeFactory', function($scope, AttendeeFactory) {

    ...
    AttendeeFactory.fetchAttendees(event_id, offset);
    ...

}]);

// Listener for state change to pause attendee fetch
AttendeeFactory.pause();

// Service/Factor definition
app.factory('AttendeeFactory', function($resource) {
    var isPaused = true; 

    function fetchAttendees(event_id, offset) {
        isPaused = false;
        fetchAttendeesRecursive(event_id, offset);
    }

    function fetchAttendeesRecursive(event_id, offset) {
        if (!isPaused) {
            Attendee(offset).show(
                {id: event_id}, 
                function success(response) {
                    [ HANDLE RESPONSE HERE ]
                    fetchAttendees(event_id, offset);
                }, 
                function error() {}
           );
        }
    }

    function Attendee(offset) {
        return $resource(
            'http://10.0.0.6:8000/backend/attendees/:id/',
            {},
            {
                show: {
                    method: 'GET', 
                    headers: {'attendee-offset': offset}, 
                    isArray: true
                }
            }
        );
    }

    function pause() { isPaused = true; }

    return {
        fetchAttendees: fetchAttendees,
        pause: pause
    };
});

If the [HANDLE RESPONSE HERE] involves updating the view's scope, additional logic is needed to notify the controller of data changes.

You can utilize $rootScope, $on, and $emit to trigger a message from the service upon attendee fetch for the controller to listen and update accordingly. Here's a basic example:

// in the controller
$rootScope.$on("AttendeeFetchedEvent", function($event, data){
  // handle data updates here
});

// in the factory/service
$scope.$emit("AttendeeFetchedEvent", dataToSendToController);

Stopping the recursive function call in AngularJS

Answer №1

Similar questions

Animating an image inside a bordered div

Choose an element based on its position in the index (multiple elements with the same class)

ng-show not syncing with ng-repeat updates

How do I implement the use of "lengthMenu: [10, 25, 50]," within an if/else statement effectively?

Vue Subroutes within nested components do not automatically load

Submitting an HTML form to trigger a PHP function through AJAX

AngularJS custom directive with isolated scope and controller binding

Attempting to use insertAdjacentHTML on a null property results in an error

Executing search bar capability through the use of AJAX and HTTP requests in JavaScript

Utilizing objects from a JSON file within an HTML document

Angular Autocomplete directive - retrieve the list of matching items

Securing a fixed path in Express and Nodejs: Best practices

Struggling with the nodejs peepcode tutorial - need some help getting it to run

Navigating with Nokia Here maps: plotting a path using GPS coordinates

Placing an icon to the left of the primaryText within the <ListItem> component of Material UI

Issues arise when Typescript's declaration merging feature does not function correctly when utilizing ts-node

Singling out a particular navigation tab

FixPermissions not working properly | Discord.js EXPERT

Nesting placeholders is not permitted in i18n

Having trouble with Javascript? Your page unexpectedly resets