Introduction to JavaScript scheduling
At some point when working with JavaScript you're going to want to delay the execution of a piece of code until a specified time. The window object has two methods that allow you to do this setTimeout and setInterval. These methods can be used in all browsers and are even supported in node and deno.
setTimeout
Calls a function or evaluates an expression after a specified number of milliseconds.
const hello = () => {
console.log('Hello World!');
};
setTimeout(hello, 1000);
// waits 1000 ms or 1 seconds
// Hello World!
We can even pass parameters to our timeout function.
const hello = (name) => {
console.log(`Hello ${name}!`);
};
setTimeout(hello, 1000, 'Fraser');
// waits 1000 ms or 1 seconds
// Hello Fraser!
Having a declared function just for the purpose of saying hello seems a little heavy, we can just use an arrow function directly in our setTimeout instead.
setTimeout(() => console.log('Hello World!'), 1000);
// waits 1000 ms or 1 seconds
// Hello World!
When we call setTimeout we get a timer identifier back which we can then use to cancel the execution by passing it to clearTimeout
const timerId = setTimeout(() => console.log('Hello World!'), 1000);
clearTimeout(timerId);
// Never executes
setInterval
Works exactly the same as setTimeout but instead of running the function or expression only once it instead does so repeatedly after a specified interval.
const hello = (name) => {
console.log(`Hello ${name}!`);
};
setInterval(hello, 1000, 'Fraser');
// waits 1000 ms or 1 seconds
// Hello Fraser!
// waits 1000 ms or 1 seconds
// Hello Fraser!
// ...
And to cancel we instead call clearInterval
const hello = (name) => {
console.log(`Hello ${name}!`);
};
const intervalId = setInterval(hello, 1000, 'Fraser');
setTimeout(() => {
clearInterval(intervalId);
console.log(`Cancelled Interval`);
}, 2500);
// waits 1000 ms or 1 seconds
// Hello Fraser!
// waits 1000 ms or 1 seconds
// Hello Fraser!
// waits 500 ms or half a second
// Cancelled Interval