setTimeout
and
setInterval
Objectives
-
Write asynchronous code using setTimeout
-
Write asynchronous code using setInterval
setTimeout
// setTimeout usage
function callback() {
console.log("callback function");
}
var delay = 1000; // Delay is in ms
setTimeout(callback, delay);A function that asynchronously invokes a callback after a delay in milliseconds
setTimeout Example
setTimeout(function() {
console.log("Runs in approx. 2000ms");
}, 2000);Console:
Runs in approx. 2000ms
Canceling setTimeout
var timerId = setTimeout(function() {
console.log("This function runs in 30 seconds");
}, 30000);
setTimeout(function() {
console.log("Canceling the first setTimeout", timerId);
clearTimeout(timerId);
}, 2000);
Console:
Canceling the first setTimeout 42
setInterval
// setInterval usage
function callback() {
console.log("callback is called continuously");
}
var repeat = 3000;
setInterval(callback, repeat);A function that continually invokes a callback after every X milliseconds, where X is provided to setInterval
setInterval Example
var num = 0;
setInterval(function() {
num++;
console.log("num:", num);
}, 1000);Console:
num: 1
num: 2
num: 3
num: 4
Canceling setInterval
var num = 0;
var intervalId = setInterval(function() {
num++;
console.log("num:", num);
if (num === 3) {
clearInterval(intervalId);
}
}, 1000);Console:
num: 1
num: 2
num: 3
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback is placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
4 function: main
Queue:
? function: setTimeout
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback is placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
4 function: main
Queue:
? function: setTimeout
function()
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback was placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
7 function: main
Queue:
2 function: square
function()
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback was placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
7 function: main
Queue:
2 function: square
function()
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback was placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
7 function: main
Queue:
? function: console.log
function()
Console:
4
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback was placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
7 function: main
Queue:
? function: console.log
function()
Console:
4
Event Loop
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback was placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
5 function: function
Queue:
? function: console.log
Console:
4
Callback was placed on the queue
1 function square(n) {
2 return n * n;
3 }
4 setTimeout(function() {
5 console.log("Callback was placed",
"on the queue");
6 }, 0);
7 console.log(square(2));Queue Example:
Waiting for the Stack to Empty
Stack:
5 function: function
Queue:
? function: console.log
Console:
4
Callback was placed on the queue
JavaScript is
Single Threaded
Single Threaded: Code execution is linear. Code that is running cannot be interrupted by something else going on in the program.
Single Threaded Example
setTimeout(function() {
console.log("Hello from the timeout");
}, 0);
for (var i = 0; i < 1000000000; i++) {
var x = i * 2;
}
console.log("Done with loop");YOUR
TURN
setTimeout and setInterval
By Elie Schoppik
