forum

home / developersection / forums / how to use $interval service in angularjs

Ask Question
Revati S Misra

Student

Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Follow
Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

15-May-2024

In AngularJS, the $interval service is used to run a specified function repeatedly at a specified interval. It is similar to setInterval in JavaScript but integrated with AngularJS's digest cycle, which means it triggers AngularJS's digest cycle after each interval, ensuring that any changes to the scope are reflected in the view.

 

Step to use $interval service

Inject $interval: First, you need to inject the $interval service into your controller, service, or directive.

angular.module('myApp').controller('myController', function($scope, $interval) {
    // Your controller logic here
});

 

Using $interval: Use the $interval service to set up an interval and specify the function to be executed and the interval duration in milliseconds.

var myInterval = $interval(function() {
    // Code to be executed repeatedly
}, 1000); // Interval duration in milliseconds (e.g., 1000 ms = 1 second)

 

Stopping the Interval: You can stop the interval by calling the $interval.cancel() function and passing the interval promise returned by $interval.

$interval.cancel(myInterval);

Example- 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>$interval Service Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-controller="myController">
    <div class="container">
        <p class="fw-semibold">Current Date is : {{currentDate}}</p>
        <p class="fw-semibold">Current Time is : {{currentTime}}</p>
        <!-- click button to stop time interval -->
        <button data-ng-click="stopInterval()" class="btn btn-primary p-2 px-3 rounded-3">Stop Interval</button>
    </div>
</div>

<script>
angular.module('myApp', [])
.controller('myController', function($scope, $interval) {
    // Function to update current time
    function updateTime() {
        $scope.currentTime = new Date().toLocaleTimeString();
    }

    // Update current time every second using $interval
    var myInterval = $interval(updateTime, 1000);

    // Stop interval automatically after 5 minute
    $interval(function() {
        $interval.cancel(myInterval);
    }, 500000);

    // show current date
    $scope.currentDate = new Date().toLocaleDateString();

    // function call when button clicked
    $scope.stopInterval = function(){
        $interval(function() {
            $interval.cancel(myInterval);
        }, 0);
    }
});

</script>
</body>
</html>

 

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy