How to cancel setIntervall function?

Question

Firstly : I'm new to angularjs or js at all. So maybe there is just a stupid mistake in my code.

So what this is about : I was trying to build a simple logout Template that is going to logout you after 10 seconds. There are also two Buttons, one for direct logout and one for cancel the logout.

My Problem : After 10 seconds the countdown doesn't stop if you just let the time pass by. So for some reason the "clearInterval" method doesn't work. If you cancel the interval by using one of the buttons it works.

So it seems like the method stills counts after the cancel and clearInterval.


<div class='container' ng-app="myAssesmentApp" ng-controller="logoutController" >
    <h1>Logout</h1>
    <br>
    <form>
        <div class='form-group'>
            <p> Ur gonna loged out in <span id="countdowntimer">10 </span> seconds</p>
        </div>
        <button type='submit' class='btn btn-primary' ng-click ="logout()" id="close">Okay log me out</button>
        <button type='submit' class='btn btn-primary' ng-click ="cancelLogout()" id="dont">i dont wanna get loged out</button>
        </form>
 </div>

JS:

    myAssesmentApp.controller('logoutController', ['$scope', 'userService', '$state', function ($scope, userService, $state) {


        $scope.timeleft = 10;
        var downloadTimer = setInterval($scope.timer, 1000);
        $scope.timer = function ()
      {
      $scope.timeleft--;
      document.getElementById("countdowntimer").textContent = $scope.timeleft;
      if ($scope.timeleft <= 0) 
      {
           $scope.stop();
      }
    };

    $scope.stop = function()
        {
            clearInterval(downloadTimer);

             $scope.logout();

        }

    $scope.cancelLogout = function () 
        {

            clearInterval(downloadTimer);
            $state.go('main.projectstate');
            $scope.dynamicView = false;
        };


        $scope.logout = function () {

            clearInterval(downloadTimer);
            userService.benutzer = '';
            userService.password = '';
            $scope.logedIn = false;
     };


    }]);

So what it should do is reset and cancel the whole method after 10 seconds.

I know I'm not the best English speaker but I hope you understand my problem :) Thanks in advance!

First thing, in AngularJS you need to use $interval instead of setInterval, after that document.getElementById("countdowntimer").textContent = $scope.timeleft; needs to change, you need to use the angular expression in your HTML to print a scope-binded value i.e. {{timeleft}} — Junaid Sarwar, Sep 12 '19 at 14:26
Possible duplicate of [Stop setInterval call in JavaScript](https://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript) — Heretic Monkey, Sep 12 '19 at 15:27
Or rather, [window.setInterval not working on angularjs](https://stackoverflow.com/q/31207513/215552) — Heretic Monkey, Sep 12 '19 at 15:28

score 0 · Answer 1 · answered Sep 12 '19 at 14:27

0

It's pretty simple and straight forward. there is a built-in method clearInterval() to cancel/clear the interval. Here is the sample code snippet,

function fun() { 
    t = setInterval( func(){}, 3000); 
} 

function stop() { 
    clearInterval(t); 
}

answered Sep 12 '19 at 14:27

Kiran Maniya

8,453
9
58
81

This was the first thing i tryed. I used the clearInterval method in three different ways and it dosent work -> Take a look at the stop and canclelogout methode :) – Natter Sep 12 '19 at 14:32
1

then probably you are doing it wrong. because `clearInterval()` always works. debug your code and try to find out the glitch. If you are doing it with `Angular`, You should follow an Angular way to do it. – Kiran Maniya Sep 12 '19 at 14:34

score 0 · Accepted Answer · answered Sep 12 '19 at 14:49

AngularJs has its own service for intervals: $interval : documentation

You can use it like this:

const downloadTimer = $interval(() => $scope.timer(), 1000);

And for cancel:

$interval.cancel(downloadTimer);

Also in HTML you have to add a binding for your variable:

 <p> Ur gonna loged out in <span id="countdowntimer">{{timeleft}}</span> seconds</p>

Check a working demo here: DEMO

How to cancel setIntervall function?

2 Answers2