JavaScript - Difference between periodic setTimeout() and setInterval() functions

setTimeout-vs-setInterval.md

Difference between periodic setTimeout() and setInterval() functions

Overview

Source

How does periodic setTimeout work?

Code

const intervalTime = 3000;
const workerTime = 5000;
const LIMIT = 5;
let intervalCount = 0;
let workerCount = 0;
const initTime = +new Date / 1000
const currTime = () => `[${Math.round((+new Date / 1000) - initTime)}]`

function wait(ms) {
   return new Promise(resolve => {
      setTimeout(resolve, ms)
   });
} 

async function worker() {
    workerCount += 1
    console.log(`${currTime()} \t${workerCount}th invocation of worker(${workerTime})`)
    await wait(workerTime)
    console.log(`${currTime()} \t${workerCount}th completion of worker(${workerTime})`)
}

console.log(`[TIME(s)] ACTION`)
console.log(`---------------------------------------`)
console.log(`${currTime()} Start process`)
setTimeout(async function periodicTimeout() {
    intervalCount += 1
    console.log(`${currTime()} ${intervalCount}th invocation of setTimeout(${intervalTime})`)
    await worker()
    console.log(`${currTime()} ${intervalCount}th completion of setTimeout(${intervalTime})`)
    if (intervalCount < LIMIT)
        setTimeout(periodicTimeout, intervalTime)
}, intervalTime)

Output

[TIME(s)] ACTION
---------------------------------------
[0] Start process
[3] 1th invocation of setTimeout(3000)
[3] 	1th invocation of worker(5000)
[8] 	1th completion of worker(5000)
[8] 1th completion of setTimeout(3000)
[11] 2th invocation of setTimeout(3000)
[11] 	2th invocation of worker(5000)
[16] 	2th completion of worker(5000)
[16] 2th completion of setTimeout(3000)
[19] 3th invocation of setTimeout(3000)
[19] 	3th invocation of worker(5000)
[24] 	3th completion of worker(5000)
[24] 3th completion of setTimeout(3000)
[27] 4th invocation of setTimeout(3000)
[27] 	4th invocation of worker(5000)
[32] 	4th completion of worker(5000)
[32] 4th completion of setTimeout(3000)
[35] 5th invocation of setTimeout(3000)
[35] 	5th invocation of worker(5000)
[40] 	5th completion of worker(5000)
[40] 5th completion of setTimeout(3000)

How does setInterval work?

Code

const intervalTime = 3000;
const workerTime = 5000;
const LIMIT = 5;
let intervalCount = 0;
let workerCount = 0;
const initTime = +new Date / 1000
const currTime = () => `[${Math.round((+new Date / 1000) - initTime)}]`

function wait(ms) {
   return new Promise(resolve => {
      setTimeout(resolve, ms)
   });
} 

async function worker() {
    workerCount += 1
    let localCount = workerCount
    console.log(`${currTime()} \t${localCount}th invocation of worker(${workerTime})`)
    await wait(workerTime)
    console.log(`${currTime()} \t${localCount}th completion of worker(${workerTime})`)
}

console.log(`[TIME(s)] ACTION`)
console.log(`---------------------------------------`)
console.log(`${currTime()} Start process`)
let intervalId = setInterval(async() => {
    intervalCount += 1
    let localCount = intervalCount
    console.log(`${currTime()} ${localCount}th invocation of setInterval(${intervalTime})`)
    await worker()
    console.log(`${currTime()} ${localCount}th completion of setInterval(${intervalTime})`)
    if (intervalCount >= LIMIT)
        clearInterval(intervalId)
}, intervalTime)

Output

[TIME(s)] ACTION
---------------------------------------
[0] Start process
[3] 1th invocation of setInterval(3000)
[3] 	1th invocation of worker(5000)
[6] 2th invocation of setInterval(3000)
[6] 	2th invocation of worker(5000)
[8] 	1th completion of worker(5000)
[8] 1th completion of setInterval(3000)
[9] 3th invocation of setInterval(3000)
[9] 	3th invocation of worker(5000)
[11] 	2th completion of worker(5000)
[11] 2th completion of setInterval(3000)
[12] 4th invocation of setInterval(3000)
[12] 	4th invocation of worker(5000)
[14] 	3th completion of worker(5000)
[14] 3th completion of setInterval(3000)
[15] 5th invocation of setInterval(3000)
[15] 	5th invocation of worker(5000)
[17] 	4th completion of worker(5000)
[17] 4th completion of setInterval(3000)
[20] 	5th completion of worker(5000)
[20] 5th completion of setInterval(3000)

Reference

Ensure that execution duration is shorter than interval frequency