How to use the setTimeOut javascript function (in the Browser)?



setTimeOut is a web api (browser function) that wraps code in a job and executes it later.

The execution of the main thread (of the code) does not stop (not blocking).


In this example, we will print 4 messages at different intervals.

// print a message
function printMessage(id, interval) {
    console.log(`The message (${id}) was printed with an interval of ${interval} seconds`);

// print a message at a certain interval with timeout
function printMessageIdAfterXSec(id, interval) {
    window.setTimeout(function() { printMessage(id, interval) },interval*1000);

// when the button is clicked, 4 messages are asked at interval
document.getElementById("startButton").addEventListener("click", function () {
   printMessageIdAfterXSec("message 1", 2);
   printMessageIdAfterXSec("message 2", 1);
   printMessageIdAfterXSec("message 3", 0);
   printMessageIdAfterXSec("message 4", 3);
  • The button to start the demo
<button id="startButton">Start Demo</button>
  • Output:


setTimeout put the function in the window (global scope).


  • does not hold up execution, it executes the next line of the function immediately after the timeout is SET, not after the timeout expires.
  • does execute the code with eval. It means that the value of the called function parameters may have changed between the timeout and the execution of the code.



var timerId = setTimeout(function[, delay, arg1, arg2, ...]);
var timerId = setTimeout(function[, delay]);
var timerId = setTimeout(code[, delay]);


  • function is a function
  • code is a string of code (that is evaluated).
  • delay is the time, in milliseconds.
  • arg1, …, argN are arguments passed to the function
  • timerId is the id of the job (timer) setInterval() uses the same timeId pool that can be used in the clearTimeout function

Discover More
Browser - Web API - setInterval

setInterval permits to execute a function at regulier interval. setTimeout Increment and log the variable i every 3 seconds. The intervalFunctionId is called a timerId. setTimeout. It is used in...
Puppeteer Architecture
Headless browser - Puppeteer

Puppeteer is a Node library that provides a high-level API over Chrome or Chromium (ie headless chrome) Puppeteer communicate with the browser via the DevTools Protocol API The Puppeteer API is hierarchical...
How to create a Debounce Function in Javascript?

A debounce is a function that: will wrap a callback function willnot let the callback function execute for each event will let the callback function execute only when a certain amount of time...
What is the Javascript Thread Model?

JavaScript is a single-thread event-loop based model. By default, all JavaScript applications (whether they be Node.js, Deno, or Bun) run on a single operating system thread. They won’t benefit from...

Share this page:
Follow us:
Task Runner