How to clear or stop timeInterval in angularjs?

How to clear or stop timeInterval in angularjs?

Asked on October 23, 2018 in AngularJs.
Add Comment


  • 5 Answer(s)

      use $interval.cancel() which cancels the interval . To delegate the starting and stopping of the interval, you can create start() and stop() functions whenever you want to stop and start them again from a specific event. I have created a snippet below showing the basics of starting and stopping an interval, by implementing it in view through the use of events (e.g. ng-click) and in the controller.

    angular.module('app', [])
      .controller('ItemController', function($scope, $interval)
    {
    // store the interval promise in this variable
    var promise;
    // simulated items array
    $scope.items = [];
    // starts the interval
    $scope.start = function()
    {
      // stops any running interval to avoid two intervals running at the same time
      $scope.stop();
      // store the interval promise
      promise = $interval(setRandomizedCollection, 1000);
    };
    // stops the interval
    $scope.stop = function()
    {
      $interval.cancel(promise);
    };
    // starting the interval by default
    $scope.start();
    // stops the interval when the scope is destroyed,
    // this usually happens when a route is changed and
    // the ItemsController $scope gets destroyed. The
    // destruction of the ItemsController scope does not
    // guarantee the stopping of any intervals, you must
    // be responsible for stopping it when the scope is
    // is destroyed.
    $scope.$on('$destroy', function()
    {
      $scope.stop();
    });
    function setRandomizedCollection()
    {
      // items to randomize 1 - 11
      var randomItems = parseInt(Math.random() * 10 + 1);
      // empties the items array
      $scope.items.length = 0;
      // loop through random N times
      while(randomItems--)
    {
        // push random number from 1 - 10000 to $scope.items
        $scope.items.push(parseInt(Math.random() * 10000 + 1));
      }
    }
    });
    
    <div ng-app="app" ng-controller="ItemController">
      <!-- Event trigger to start the interval -->
      <button type="button" ng-click="start()">Start Interval</button>
      <!-- Event trigger to stop the interval -->
      <button type="button" ng-click="stop()">Stop Interval</button>
      <!-- display all the random items -->
      <ul>
        <li ng-repeat="item in items track by $index" ng-bind="item"></li>
      </ul>
      <!-- end of display -->
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    
    Answered on October 23, 2018.
    Add Comment

    For clearing or stop the time interval,this codes are used

    var interval = $interval(function()
    {
      console.log('say hello');
    }, 1000);
    $interval.cancel(interval);
    
    Answered on October 23, 2018.
    Add Comment

    this codes are used to set the interval period for  clear or stop timeinterval in angularjs

    var promise = $interval(function()
    {
      if($location.path() == '/landing')
    {
        $rootScope.$emit('testData',"test");
        $interval.cancel(promise);
      }
    },2000);
    
    Answered on October 23, 2018.
    Add Comment

    This below mentioned code best works for functions such as setTimeout() and clearTimeout() functions .

    var $timer = $('#timer'),
       count = 0;
    //set the interval
    var interval = setInterval(function() {
        $timer.html(count++);
    }, 1000);
    console.log('the interval is: '+interval);
    //clear it
    $('button').bind('click', function(e) {
        var found;
        for(i=0; i<10000; i++)
       {
          window.clearInterval(i);
      }
    });
    

     

    Answered on December 14, 2018.
    Add Comment

    The alternate solution for the question  is display the current time ,the setInterval() method will execute the “myTimer” function once every 1 second.And use  the clearInterval() to stop the time:

    var myVar = setInterval(myTimer, 1000);
    function myTimer() {
    var d = new Date();
    var t = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = t;
    }
    function myStopFunction() {
    clearInterval(myVar);
    }
    
    Answered on December 14, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.