Why Does AngularJS have $timeout and $interval Services?

  • Estimated read time: 4 min read
  • Written by Chad Campbell on Nov 15th 2013

AngularJS provides a number of valuable services right out-of-the-box. These services are commonly used when building web apps. A number of them act like wrappers to features already provided in JavaScript. Two such services are the $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.

Imagine you have some legacy code that you're bringing AngularJS into. This pre-existing code may use the traditional JavaScript 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 $timeout.

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:

function promiseCtrl($scope, $timeout) {
  $scope.result = $timeout(function({ return "Go!"; }, 1000);
}

...

{{result || "Loading…"}

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.


Comments

comments powered by Disqus

Chad Campbell
Chad Campbell

Chad is an independent software professional. He has been named a Microsoft MVP five times. His books have been translated into multiple languages and distributed worldwide. He holds a computer science degree from Purdue University, where he also studied psychology.

Chad has built sites, apps, frameworks, libraries, and platforms using Java, .NET, and Node. He's ran his own startups and has created software for Fortune 100 companies. In short, Chad knows how to create software. From ideation to delivery. From start-to-finish.


Follow Chad Online