Managing setInterval() activation and deactivation in an ES6 AngularJS controller class is essential for efficient

In my application, I have a controller class serving as the state controller. In the constructor of this controller class, I've registered a setInterval() method to call a service every 30 seconds.

export default class abc {

constructor() {
setInterval(() => {
        // Call to service class here
      }, 30000 );
}
}

The issue I'm facing now is that even when the state changes, the service call continues to happen. I believe clearInterval() method should be used to stop this but I am unsure how to implement it. Since this is not a component, I cannot use $ondestroy(). I also prefer not to resort to using event listeners for state change. Is there an alternative approach, like a destructor or similar mechanism, that can help me unregister the setInterval? My project involves angular-ui-router with ES6 syntax. Any guidance would be greatly appreciated.

Answer №1

The $onDestroy method is not only specific to component controllers but also applies to all directive controllers. This method is triggered when the scope's $destroy event occurs.

For state controllers with their own scopes, you can use a scope $destroy listener in template-based routes like this:

$scope.$on('$destroy', () => {
  clearInterval(interval);
});

The $onDestroy method is now supported in UI Router 1.0 for component-based routes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering the reason behind a DOM element's visual alteration upon hovering: Where to start?

Visit this page, then click on the next button to navigate to the time slots section. As you hover over any time slot, you will notice a change in appearance. Despite inspecting Chrome's developer tools, I was unable to locate a style with a hover dec ...

What is causing the failure of this variable assignment in the NodeJS REPL?

Could anyone provide some insight on the behavior I am experiencing? I assumed that since I can set the global variable f from within this callback, I should also be able to change it. However, my understanding of how node handles context versus global in ...

Use Bootstrap to implement a searchable multi-select dropdown similar to the one found in Semantic UI

I've been trying to tackle this particular challenge without success so far: https://i.sstatic.net/PfZNG.png My website is built on Bootstrap, which has been incredibly helpful. However, I'm struggling to find a sleek search bar with multi-sele ...

Retrieving the body of a GET request using NodeJS and axios

Let me share my request with you: axios.get(BASE_URI + '/birds/random', {Stuff: "STUFF"}) .then(randBird=>{ const birdData = randBird.data const bird = { age: birdData.age, ...

In the world of Angular.js, what happens when a promise is

Below is the code snippet I have been working on: $scope.getfiles = function() { Api.file.query().$promise.then( function(result){ $scope.getfiles = result; }, //on success $scope.commonAjaxErrorHandling("Failed to get File data.", true) //on ...

What is the best way to send an email with a randomly generated HTML output using a <button>?

I am currently working on a feature where a random HTML output is sent to me via email whenever a user clicks on a button on the website page. The user receives a code when they click the button, and I want that code to be emailed to my address automatical ...

Is there a way to connect the horizontal scrolling of a table header with the horizontal scrolling of a table body while keeping the vertical scrolling of the table body separate from the table header?

Looking for a solution that provides a fixed header and frozen pane within a table, similar to the example at . However, I need the header to scroll horizontally with the body of the table. Here is an example based on the aforementioned link. The problem ...

Deactivating toolbar in material table in ReactJS while maintaining default functionalities

https://i.sstatic.net/XrA3I.pngHow can I remove the toolbar to eliminate the blank space between the table and button without disabling the add new row functionality? <MaterialTable title=" " options={{ ...

Press on any two table cells to select their content, highlight it, and save their values in variables

I have a table retrieved from a database that looks like this (the number of rows may vary): |Player 1|Player 2| ------------------- |Danny |Danny | |John |John | |Mary |Mary | My goal is to select one name from each Player column and sto ...

Steps to establish the starting value as 'Concealed'

I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked. My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked? He ...

Refreshing the current page within a Vue single-page application website

I've attempted numerous methods to resolve this issue. I have tried using .htaccess in an Apache hosting environment (which is my preferred setup for hosting my site), Heroku, and Netlify with both a _redirects file and netlify.toml file. Unfortunatel ...

Error encountered when executing the npm run dev script

Attempting to follow a tutorial, I keep encountering an error related to the script. I've tried restarting the tutorial to ensure I didn't overlook anything, but the same issue persists. Working on a Mac using pycharm. In the tutorial (from Ude ...

Using Angular 5 to showcase multiple charts with Chart.js, each chart appearing on its own tab

I have successfully displayed a single chart, but I am facing an issue while trying to display that chart for each tab of a mat-tab-group with different data on each tab. The chart is a part of a larger dashboard consisting of multiple charts, and I have i ...

Secure your browsing experience with AngularJS authentication prompt

Currently, I am working on building an application using AngularJS for the front-end and JavaEE for the back-end. In my AngularJS application, I am trying to access a REST resource provided by the back-end which is protected with JAAS authentication, allow ...

Locate the exact username of a returning user by utilizing local storage

I am working on a script to identify new visitors to my page, prompt them for their name, and store it using local storage. If the visitor is a returning user, I want to display their name on the page using 'querySelector'. So far, I have been t ...

Generating a chart using solely the existing data components (values)

I have the following arrays: const elements = ['12345', '12346', '12347', '12348', '12349', '12350']; const fruits = ['Apple', 'Ball']; I want to create a Map using array ele ...

The compatibility between MUI Autocomplete and react-hook-form is limited and may not function properly

Problem Description I am encountering various errors at different times. Specifically, when I try to select a suggested option, I receive the following error and warning messages: Material-UI: The getOptionLabel method of Autocomplete returned undefined ...

Troubleshooting the pre-loader image loading problem

Apologies for bringing up a minor issue, but I'm struggling with this one. I added a pre-loader image to my page load using a simple method. You can find my page here Here is the HTML code for the Pre-loader image: <div class="se-pre-con">&l ...

Is there a way to generate various combinations of a String using specified replacements in JavaScript?

I am looking to find all possible combinations of a string while keeping the correct order intact and avoiding duplicates. The goal is to create more flexible solutions for Japanese quizzes by allowing a mix of kana and kanji characters. To achieve this, I ...

Animating with jQuery to a specific offset or position

Currently, I am utilizing jQuery animate to modify the location of an element: $('#item').animate({'top' : '-50'}, 0); The goal is to set the position without any animations. I experimented with both offset and position, but ...