Callback Functions

Objectives

Use callbacks with setInterval and setTimeout

Previously, we saw that functions can be assigned to variables. For example:

var add = function(a, b) {
  return a + b
}

add(1, 2);
> 3

Functions are first-class citizens in JavaScript. This means that we can create functions, store them into variables, and pass functions into other functions. Functions are only executed when called. Try this to illustrate:

Try running the following. What is printed to the screen?

var bag = function() {
  console.log('Hello, I am a bag');
}

console.log(bag);

Inside the bucket of the variable is a function, waiting to be run.

We can take advantage of this behavior by defining callback functions. Callback functions are passed via variable name (reference), and are called at a specific time.

Do something later: Callbacks

setTimeout

The setTimeout() function takes a function and a delay in milliseconds, and executes the function as soon as possible after that delay has passed.

var announce = function() {
  console.log('Ding!');
}

var threeSecondTimeout = setTimeout(announce, 3000);

Under the hood the function is being executed just like the one we wrote.

This can be done via anonymous functions as well. Anonymous functions are functions that are not stored to a variable. They are great for functions you only need to define once. Here's an example.

var fiveSecondTimeoutReference = setTimeout(function() {
  console.log('Ding!');
}, 5000);

The setInterval() function takes a function and a delay in milliseconds, and executes that function as closely as possible each time that interval of milliseconds has passed.

var annoy = function(){
  console.log('Are we there yet?');
};

var oneSecondIntervalReference = setInterval(annoy, 1000);

Things to be careful of: you need to know what the function expects as parameters. Javascript is forgiving, but not a mind-reader.

Oh, and if you want to disable the timers before they fire, you can use the clearTimeout(timeoutHandle) or clearInterval(intervalHandle) functions:

var fourSecondTimeoutReference = setTimeout(announce, 4000);
clearTimeout(fourSecondTimeoutReference);

var threeSecondIntervalReference = setInterval(annoy, 1000);
clearInterval(threeSecondIntervalReference);

Timeout and Interval Patterns

Count the number of seconds.

var counter = 0;

var count = function(){
  counter++;
  console.log(counter + ' times.');
};

var oneSecondIntervalReference = setInterval(count, 1000);

Do one thing and then another.

var secondThing = function(){
  console.log('second!');
};

var firstThing = function() {
  console.log('first!');
  console.log('let's do something soon (second thing)');
  setTimeout(secondThing, 2000);
};

setTimeout(firstThing, 2000);

Pairing Exercises

Write code that uses setTimeout
Write code that uses setInterval
Run the above examples.
Write 3 set timeouts that console.log something in this order in your code: 1. setTimeout for 4 seconds 2. setTimeout for 2 seconds 3. setTimeout for 2 seconds. What happens?
write code that uses setInterval and a separate counter variable to console.log something every 3 seconds.
write code that clears the interval after 20 seconds
write code that console.logs something once a second 10 times.
Use the interactive template. The user will enter a number. console.log something every second the number of times the user entered
if the user enters a number that's larger than 10, reduce the amount of time between console.logs
the next time the user enters anything, stop the console.log
change the console.log to change what's on the screen / output the number each time the interval runs
Set a proportional interval so that no matter what, all of the console.logs happen within 30 seconds max.

Callbacks