Setting a timeout for polling in JavaScript or Angular

Question

Setting a timeout for polling in JavaScript or Angular

function checkForNotifications(id) {    
    $http({
            method: "POST",
            url:( "url"),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            data: $.param({id: id}),
        })
            .then(notificationCheckComplete)
            .catch(function(message) {
                throw new Error("XHR Failed ",message);
            });

        function notificationCheckComplete(response, status, headers, config) {
            //perform actions based on response, display errors, show popups, etc.
        }
  setTimeout(function() {checkForNotifications()}, 1000);
}

This code is designed to periodically poll the database for new notifications.

I do not clear the timeout and do not use $timeout. Could this lead to issues such as Chrome freezing or high CPU usage?

How can I properly clear the timeout and verify that it has been cleared?

All functions and UI elements are part of an Angular service/factory without a controller (except for the service call).

javascript angularjs polling

Answer 1

Answer №1

In order to execute the scanComplete function, you should only invoke it again within this specific function.

function scanComplete(response, status, headers, config) {
    //perform actions such as displaying errors, popups, or calling other functions
    setTimeout( scan, 1000); //invoke after your ajax is complete
}

By following this approach, you will guarantee that only one instance of the scan function is running at any given time.

I don't clear the timeout at all and I do not use $timeout. Could this be a mistake? Will it lead to issues like freezing or excessive CPU usage in Chrome?

As long as you are only triggering one instance of the scan function sequentially, there shouldn't be any concern regarding CPU overhead or performance issues.

Answer 2

In order to execute the scanComplete function, you should only invoke it again within this specific function.

function scanComplete(response, status, headers, config) {
    //perform actions such as displaying errors, popups, or calling other functions
    setTimeout( scan, 1000); //invoke after your ajax is complete
}

By following this approach, you will guarantee that only one instance of the scan function is running at any given time.

I don't clear the timeout at all and I do not use $timeout. Could this be a mistake? Will it lead to issues like freezing or excessive CPU usage in Chrome?

As long as you are only triggering one instance of the scan function sequentially, there shouldn't be any concern regarding CPU overhead or performance issues.

Answer 3

Answer №2

If you want to handle the $destroy event in your main controller, you can create a function in your service that clears a timeout when the event is triggered:

module.factory("myService", function($scope, $timeout) {
     
  var timer;
     
  function startTimer() {    
    // $http......
    timer = setTimeout(function() {startTimer()}, 1000);
  }

  function clearTimer() {
      if (timer) {
          $timeout.cancel(timer);
      }
  }
 
  return {
     clearTimer: clearTimer,
     // ...
  }

});

module.controller("MainController", function($scope, $timeout, myService) {
  $scope.$on("$destroy", function() {
      myService.clearTimer();
  });
});

Answer 4

If you want to handle the $destroy event in your main controller, you can create a function in your service that clears a timeout when the event is triggered:

module.factory("myService", function($scope, $timeout) {
     
  var timer;
     
  function startTimer() {    
    // $http......
    timer = setTimeout(function() {startTimer()}, 1000);
  }

  function clearTimer() {
      if (timer) {
          $timeout.cancel(timer);
      }
  }
 
  return {
     clearTimer: clearTimer,
     // ...
  }

});

module.controller("MainController", function($scope, $timeout, myService) {
  $scope.$on("$destroy", function() {
      myService.clearTimer();
  });
});

Setting a timeout for polling in JavaScript or Angular

Answer №1

Answer №2

Similar questions

Navigate to the following tabindex after submitting the form again

Manipulating and inserting objects into an array using React and Typescript with an undefined type

Retrieve and manipulate the HTML content of a webpage that has been loaded into a

Craft a JavaScript script (empowered by selenium) that endures through page reloads

Keep an ear out for updates on object changes in Angular

JavaScript does not recognize Bootstrap classes

Extension for Chrome - view source of current webpage

How can I extract and display data from a MySQL database in cytoscape.js?

Error in JSON Format Detected in Google Chrome Extension

The Project_Name index has not been defined

Navigating Promise.all effectively: Understanding the issue of receiving undefined

Different width, same height - images arranged side by side in a responsive layout

The current state of my DOM doesn't match the updated value in my model. The update is triggered by a function that is called when a button is clicked

Providing the module with the URL

Guide to organizing elements in an array within a separate array

How can I use a button to save all changes made in a JqGrid checkbox column simultaneously?

"Exploring the transition from traditional polling to the enhanced experience

Look for specific terms within an array of words

The React JSON Unhandled Rejection problem requires immediate attention

Troubleshooting problem with binding and calling jQuery javascript functions