What is the best approach for writing an asynchronous function while utilizing $rootScope.broadcast within a continuous loop?

Question

What is the best approach for writing an asynchronous function while utilizing $rootScope.broadcast within a continuous loop?

At least 10 times a second, I have a function that is called. Each time, there are approximately 100 records with variations in LastSeenTime and ReadCount. In this simulation scenario, I understand the behavior; however, in real-time, the number of records in an array can range from 100 to 1000 and they may or may not be identical. It is essential for me to add all unique records to tagStore, which will then be displayed in the UI.

$scope.$on('getReadTags', function (event, tags) {

        if (($scope.tagStore == null || $scope.tagStore.length == 0) && tags.length != 0) {
            $scope.tagStore = tags;
        }
        else {
            for (var i = 0; i < tags.length; i++) {
                var notFound = true;

                for (var j = 0; j < $scope.tagStore.length; j++) {
                    if (tags[i].TagID == $scope.tagStore[j].TagID) {
                        $scope.tagStore[j].ReadCount += tags[i].ReadCount;
                        $scope.tagStore[j].LastSeenTime = tags[i].LastSeenTime;
                        $scope.tagStore[j].DiscoveryTime = tags[i].DiscoveryTime;
                        notFound = false;
                        break;
                    }
                }
                if (!notFound) {
                    $scope.tagStore.push(tags[i]);
                }
            }
        }
        $scope.$apply();
    });

Upon running this code, my browser becomes unresponsive, and I've noticed a significant spike in CPU and RAM usage. To address this issue, I require this method to only be invoked after the completion of another method.

javascript angularjs signalr

Answer 1

Answer №1

Running multiple digest cycles consecutively can significantly increase CPU and memory usage, causing the browser to hang.

To optimize this process, consider using $applyAsync instead of $scope.$apply(); to consolidate multiple updates into a single $digest cycle. This approach is recommended in the documentation (bold area):

$applyAsync([exp]); Schedule the invocation of $apply to occur at a later time. The actual time difference varies across browsers, but is typically around ~10 milliseconds.

This can be used to queue up multiple expressions which need to be evaluated in the same digest.

The loop

for (var j = 0; j < $scope.tagStore.length; j++) {

can be optimized as it iterates through the entire list of tags for each tag insertion or update. Consider implementing the following code snippet instead:

var tagsMap;

$scope.$on('getReadTags', function (event, tags) {  
    if (($scope.tagStore == null || $scope.tagStore.length == 0) && tags.length != 0) {
        $scope.tagStore = tags;
        tagsMap = tags.reduce(function(obj, item) {
            obj[item.TagID] = item; // create a map of all tags
        }, {});
    } else {
        for (var i = 0; i < tags.length; i++) {
            if(tagsMap[tags[i].TagID]) { // if tag exists in the map, update the tag
                tagsMap[tags[i].TagID].ReadCount += tags[i].ReadCount;
                tagsMap[tags[i].TagID].LastSeenTime = tags[i].LastSeenTime;
                tagsMap[tags[i].TagID].DiscoveryTime = tags[i].DiscoveryTime;
            } else { // if tag doesn't exist, push it into the scope, and add it to the tagsMap
                $scope.tagStore.push(tags[i]);
                tagsMap[tags[i].TagID] = tags[i];
            }
        }
    }
    $scope.$applyAsync();
});

Answer 2

Running multiple digest cycles consecutively can significantly increase CPU and memory usage, causing the browser to hang.

To optimize this process, consider using $applyAsync instead of $scope.$apply(); to consolidate multiple updates into a single $digest cycle. This approach is recommended in the documentation (bold area):

$applyAsync([exp]); Schedule the invocation of $apply to occur at a later time. The actual time difference varies across browsers, but is typically around ~10 milliseconds.

This can be used to queue up multiple expressions which need to be evaluated in the same digest.

The loop

for (var j = 0; j < $scope.tagStore.length; j++) {

can be optimized as it iterates through the entire list of tags for each tag insertion or update. Consider implementing the following code snippet instead:

var tagsMap;

$scope.$on('getReadTags', function (event, tags) {  
    if (($scope.tagStore == null || $scope.tagStore.length == 0) && tags.length != 0) {
        $scope.tagStore = tags;
        tagsMap = tags.reduce(function(obj, item) {
            obj[item.TagID] = item; // create a map of all tags
        }, {});
    } else {
        for (var i = 0; i < tags.length; i++) {
            if(tagsMap[tags[i].TagID]) { // if tag exists in the map, update the tag
                tagsMap[tags[i].TagID].ReadCount += tags[i].ReadCount;
                tagsMap[tags[i].TagID].LastSeenTime = tags[i].LastSeenTime;
                tagsMap[tags[i].TagID].DiscoveryTime = tags[i].DiscoveryTime;
            } else { // if tag doesn't exist, push it into the scope, and add it to the tagsMap
                $scope.tagStore.push(tags[i]);
                tagsMap[tags[i].TagID] = tags[i];
            }
        }
    }
    $scope.$applyAsync();
});

What is the best approach for writing an asynchronous function while utilizing $rootScope.broadcast within a continuous loop?

Answer №1

Similar questions

unleashing the magic of AJAX: a guide to extracting

A jQuery component with built-in event triggers

Organize array by year and month groupings

Generate an HTML dropdown menu based on the item selected from the autocomplete input field

I encounter a black screen issue while attempting to rotate a three.js cube

React function failing to utilize the latest state

Steps for setting up node-openalpr on a Windows 10 system

Imitate a HTTP request

Using JQuery to manipulate `this`, its children, its siblings, and more

Utilizing JSON format, handling special characters, and storing data in a database

Monitor modifications to an <input type="text"> element as its value is updated dynamically through JQuery from the server side

What sets xhr.response apart from xhr.responseText in XMLHttpRequest?

Is it possible to generate distance between 2 elements without utilizing padding or margin?

Attaching a callback function to a directive using a template tag in Angular

Sending an array object from Ajax to Django Framework

The 401 error code does not provide a JSON response

Encountering ReferenceError when attempting to declare a variable in TypeScript from an external file because it is not defined

issues with the functionality of bootstrap modal

What steps can be taken to stop 'type-hacking'?

Modify the color of a div element in React when it is clicked on