Why Does AngularJS have $timeout and $interval Services?
- Estimated read time: 4 min read
- Written by Chad Campbell on Nov 15th 2013
$interval service and the
$timeout service. You may be wondering why these kinds of wrappers exist. These service wrappers provide several advantages.
Advantage 1: Mocking
Car makers use crash test dummies to analyze the impact on a person in an accident. The crash test dummy mimics a real human. Mocking is a way of mimicking, or faking, a real object.
In software, mocking helps us test something that has a dependency. Code that is dependent on some other code, that may not even be finished, can be difficult to test with confidence. Mocking provides a backdoor that empowers us to fake the dependency so we can focus on testing the code at hand.
Advantage 2: Change Monitoring
One of the powerful features of AngularJS is its data-binding capabilities. When changes are made in the
$scope, those changes can be reflected in the user interface. When a UI leverages the data-binding features, change monitoring happens with no additional code. You may wonder how that happens.
The properties within
$scope automatically get watchers put on them. Watchers are listeners that are triggered when a change happens. These watchers are processed when a change happens in the UI. All of this is handled by the
$digest method. From the AngularJS docs you can see there is more involved in this process. However, the main take away is you get it for free when you adhere to AngularJS's method of doing things, including using services. You can notify the UI of changes manually if you choose though.
setTimout function. While this function is executing outside of the AngularJS framework, you can still broadcast changes to the UI via the
$apply method. This approach is not difficult. It's just one additional line of code you're responsible for though. This is a trade-off of using traditional functions like
setTimeout over services like
Advantage 3: Promises
A promise is the result of a task. Promises empower us as developers to simplify our code, use multiple callbacks with a single task, and monitor the states and values during a task. Several of AngularJS's baked-in services provide direct support for promises. An example of such a promise can be seen here:
The example above shows a promise in action. After one second, the
result property will be changed from its default value to "Go!". When the change happens, the UI is automatically updated. While this example uses a promise, it doesn't really drive home the value of promises. That subject is beyond the scope of this article. For that reason, I'd recommend looking at What's The Point of Promises?
Advantage 4: Additional Functionality
At first glance, it may be tempting to think some of the services are mere wrappers. However, AngularJS actually adds additional functionality. For instance, in the case of $timeout, AngularJS adds the ability to flush pending tasks and check to see if all tasks have been completed. The additional functionality varies by service. However, they can go a long way to help create clean and consistent code.
These four advantages begin to explain why AngularJS has some wrapper services. If there are other advantages you see with AngularJS's services, please post them in the comments below. If you have other questions or comments related to this post, please leave them in the comments below.