Callbacks
Tuesday, September 15th, 2009Since functions are objects they can be passed as arguments to other functions.
function test(a, b, fn) { fn(a, b); }
In this simple example we have a function test()
that takes a function fn
as a third parameter and calls that function passing the first two parameters.
When you cal the test()
function, you can pass a pointer to an existing function myFunc()
or you can also pass an anonymous function.
test(1, 2, myFunc); test(1, 2, function(one, two){ console.log(arguments); });
Examples
For examples of this pattern in the wild – well, every time you attach an event listener, you pass a callback function.
document.addEventListener( 'click', animateAndWowUser, false );
Same with timeouts and intervals. setTimeout()
and setInterval()
expect a function and call it back after the specified number of milliseconds.
var thePlotThickens = function(){ console.log('500ms later...'); }; setTimeout(thePlotThickens, 500);
And here's a common anti-pattern – passing a string where a function is expected. The JavaScript engine has no choice but to evaluate the string (like with eval()
) and execute it, which is unnecessary work.
// anti-pattern setTimeout("thePlotThickens()", 500);