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