Introduction

In this article, we will look at how the JavaScript timer functions - settimeout, setinterval, and Cleartimeout -- are used to schedule and cancel timer-based Callbacks, with a simple example of stopwatch program.

Brief of settimeout

• In simple words, it will call any function after the specified time (milliseconds). This specified time is also called a delay.
• For example - if we specify the delay as 5000, then it will wait for 5 seconds and start to execute the function which was passed as a parameter.

Below is the syntax

First Parameter(fn) => Any function name

Second Parameter(delay) =>  specifies the no. of milliseconds to wait before it starts the execution of given function

Few days back, I was guiding some new node.js developers on making asynchronous stuffs. We were discussing about async apis of node js. I wanted to provide them with some references and googled for few; but surprisingly, majority of the articles out there in the internet about setImmediate() or process.nextTick() was containing insufficient or misleading information. And going through official documents of Node may not really be feasible for non-advanced developers. Hence I decided to come up with this article.

Before I start describing anything, I would like to clear some of the misconceptions of the other articles, covering this topic. If you are not misled yet, you can skip this section.

When I told my colleague Matt Gaunt I was thinking of writing a piece on microtask queueing and execution within the browser's event loop, he said "I'll be honest with you Jake, I'm not going to read that". Well, I've written it anyway, so we're all going to sit here and enjoy it, ok?

Take this little bit of JavaScript:

In what order should the logs appear?

Clear log Run test

The correct answer: script start, script end, promise1, promise2, setTimeout, but it's pretty wild out there in terms of browser support.

Microsoft Edge, Firefox 40, iOS Safari and desktop Safari 8.0.8 log setTimeout before

When working with JavaScript, you sometimes need to use the setTimeout function to force some piece of code to run at the next tick. If you are working with Angular, for example, you probably already familiar with this kind of things.

The setTimeout “hack”:

setTimeout(() => {

 ...Code...
 This Code will run at the next tick.

}, 0);

Call me crazy, but I hate to write code like this, especially when the setTimeout is not something that comes from my need. I want this to be cleaner. So what if we could abstract the setTimeout function to a decorator.

Let’s create a method decorator named timeout to clean our code.

While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready? Promises are becoming a big part of the JavaScript world, with many new APIs being implemented with the promise philosophy. Let's take a look at promises, the API, how it's used!

The XMLHttpRequest API is async but does not use the Promises API. There are a few native APIs that now use promises, however:

• Battery API
• fetch API (XHR's replacement)
• ServiceWorker API (post coming soon!)