JavaScript has functions for running functions at a specified schedule time or interval. They’re the setTimeout and setInterval functions respectively.

setTimeout

setTimeout lets us run code after a specified time from the setTimeout function is called. It takes 2 arguments. The first is a callback function with code that we want to run. The second argument is the time in which the code in the callback function runs relative to the time that this function is called. This argument is a number in milliseconds.

We can use it as follows:

setTimeout(() => {  
  console.log('Hi');  
}, 3000)

The code above will log 'Hi' after 3 seconds, which is 3000 milliseconds.

We can also pass in a function reference or variable as follows:

function hi() {  
  console.log('Hi');  
}

setTimeout(hi, 3000)

Or we can write:

const hi = () => {  
  console.log('Hi');  
}

setTimeout(hi, 3000)

Notice that we just pass in the function name. This is because the function is to be run later, not immediately. Therefore, we want to pass in a function reference instead of calling it in the code.

We can pass in arguments to the callback function by specifying additional arguments after the second one. For example, we can write:

setTimeout((name, age) => {  
  console.log(`Hi ${name}. Your age is ${age}.`)  
}, 3000, 'Joe', 20);

After we run the code above, we should see 'Hi Joe. Your age is 20.’ since we passed in 'Joe' for name and 20 for age .

The setTimeout function returns an ID object which can be used to cancel the setTimeout operation with the clearTimeout function. We can use it as follows:

let timerId = setTimeout(() => {  
  console.log('Hi');  
}, 3000)

clearTimeout(timerId);

If we run the code above, we’ll see nothing since we cancelled the operation with the clearTimeout function.

Repeated setTimeout

We can use setTimeout like setInterval by nesting the callback function inside itself. For example to log 'Hi' every 3 seconds, we can write:

setTimeout(function hi() {  
  console.log('Hi');  
  setTimeout(hi, 3000);  
}, 3000)

Then we can cancel the repeated operations by:

let timerId;  
timerId = setTimeout(function hi() {  
  console.log('Hi');  
  timerId = setTimeout(hi, 3000);  
}, 3000)

clearTimeout(timerId);

The callback functions’ execution time is counted in the delay that we pass into the second argument, so the actual interval between the function runs is less than the delay we specified.

Zero Delay setTimeout

To run code immediately after the script is executed, we can specify 0 for the delay in the setTimeout function. For example, we can write:

console.log('1');  
setTimeout(() => {  
  console.log('3');  
})  
console.log('2');

Then we see that 1, 2 and 3 are logged in that order. This is because all the synchronous code is run first. Then the asynchronous code in the setTimeout ‘s callback function is run.

setInterval

The setInterval function lets us run code repeatedly at a specified time interval.

The arguments are the same as setTimeout .

We can use it as follows:

setInterval(() => {  
  console.log('Hi');  
}, 3000)

When we run the code above, we see the word 'Hi' logged every 3 seconds.

Like setTimeout , there’s a function to cancel the setInterval operation. There’s a clearTimeout function to cancel it.

setInterval returns an ID object which we can pass into the clearInterval method to cancel the operation.

For example, we can write:

let timerId = setInterval(() => {  
  console.log('Hi');  
}, 3000)

clearTimeout(timerId);

If we run the code above, we see that nothing is logged since the setInterval operation was cancelled immediately after it’s initiated.

We can pass in arguments to the callback function by specifying additional arguments after the second one. For example, we can write:

setInterval((name, age) => {  
  console.log(`Hi ${name}. Your age is ${age}.`)  
}, 3000, 'Joe', 20);

After we run the code above, we should see 'Hi Joe. Your age is 20.’ since we passed in 'Joe' for name and 20 for age.

Value of this

The value of this should be the window object and not undefined by default, even in strict mode.

For example, if we write:

setInterval(() => {  
  console.log(this)  
}, 3000);

We should get the window object logged every 3 seconds.

The setTimeout and setInterval functions are timer functions that let us run code that we want to schedule for a specified time or an interval respectively.

We do this by passing in a callback function which runs the code we want to delay or run repeatedly. Then we specify the delay or interval in milliseconds.

To pass in arguments to the callback function, we can specify additional arguments after the second argument in both functions.

The timer isn’t always exactly because of CPU issues like it being overloaded, or lots of background processes are running, or the CPU is throttled.