JavaScript interval vs timeout

in JavaScript when we need to call a function, we just write the function name then the compiler executes it immediately but what if we want schedule the execution of our function to be executed later after certain time.

JavaScript provides setTimeout to execute our function once after interval of time.

The syntax of setTimeout :

setTimeout(function, milliseconds);

function print(){

console.log("hi, Iam Ismail");    
}

//immediately execution of function
print();


//execute function after 3 seconds
setTimeout(print, 3000);

Output:

//immediately
hi, Iam Ismail





//after 3 seconds
hi, Iam Ismail

Passing params to setTimeout :

The syntax

setTimeout(function, milliseconds, param1, param2, ...)

Passing params to setTimeout can be done by two ways adding params after the interval time see code below:

function print(name){

console.log("hi, Iam ",name);    
}

//passing params
setTimeout(print, 3000,'Ismail');

Output

//after 3 seconds

hi, Iam  Ismail

Another way passing our delayed function with its params to setTimeout like this

//passing params using arrow function
setTimeout(()=>print('Ahmed'), 5000);

//passing params using function
setTimeout(function(){print('Devid')}, 7000);

OutPut

//after 5 seconds
hi, Iam  Ahmed

//after 7 seconds
hi, Iam  Devid

Canceling with clearTimeout

Identify setTimeout by variable, use it to cancel the execution.

The syntax

Canceling like this

function print(name){

console.log("hi, Iam ",name);    
}

const helloAli=setTimeout(print, 1000,'ali');

const helloIsmail=setTimeout(print, 3000,'Ismail');

const helloAhmed=setTimeout(print, 5000,'Ahmed');

clearTimeout(helloIsmail);

Output

hi, Iam  ali
hi, Iam  Ahmed

Notice hi, Iam Ismail didn't executed.

setInterval

setInterval execute function every interval time, execution is continuous and does not stop unless using clearInterval.

setInterval syntax:

setInterval(function, milliseconds, param1, param2, ...)

example using setInterval, printing tick every second:

// repeat with the interval of 1 seconds
let timerId = setInterval(() => console.log('tick'), 1000);

But this code will execution infinity, to stop it we must use clearInterval:

// repeat with the interval of 1 seconds
let timerId = setInterval(() => console.log('tick'), 1000);

// after 5 seconds stop
setTimeout(() => { clearInterval(timerId); console.log('stop'); }, 5000);

Output:

tick
tick
tick
tick
stop

Nested setTimeout:

There is another way to run something regularly than setInterval, its nested setTimeout like this:

/** instead of:
let timerId = setInterval(() => console.log('tick'), 1000);
*/
let timerId = setTimeout(function tick() {
  console.log('tick');
  timerId = setTimeout(tick, 1000); // (*)
}, 1000);


setTimeout(()=>clearTimeout(timerId), 5000);

the trick is scheduling another call in the end of current one.

the nested setTimeout is more flexible than setInterval because we can change the interval time in the nested setTimeout this is very helpful in different scenarios.

Bonus Part:

What do you think the result of this code:

for(var i=0;i<5;i++){

let timerId = setTimeout(function tick() {
  console.log('tick');
}, 5000);

}

Waiting for your answers.

Thanks, stay in touch ismail abo almagd or @SaaSboy on Twitter.