function writeCode(callback) { // do something... callback(); // ... } function introduceBugs() { // ... make bugs } writeCode(introduceBugs);
A Callback Example
// refactored findNodes() to accept a callback var findNodes = function (callback) { var i = 100000, nodes = [], found; // check if callback is callable if (typeof callback !== "function") { callback = false; } while (i) { i -= 1; // complex logic here... // now callback: if (callback) { callback(found); } nodes.push(found); } return nodes; };
Callbacks and Scope
var myapp = {}; myapp.color = "green"; myapp.paint = function (node) { node.style.color = this.color; };
The function findNodes() does something like this:
var findNodes = function (callback) { // ... if (typeof callback === "function") { callback(found); } // ... };
If you call findNodes(myapp.paint), it won’t work as expected, because this.color will not be defined. The object this will refer to the global object, because findNodes() is a global function. If findNodes() were a method of an object called dom (like dom.findNodes()), then this inside of the callback would refer to dom instead of the expected myapp.
pass the callback function and in addition pass the object this callback belongs to
findNodes(myapp.paint, myapp); var findNodes = function (callback, callback_obj) { //... if (typeof callback === "function") { callback.call(callback_obj, found); } // ... };
pass the method as a string
findNodes("paint", myapp);
var findNodes = function (callback, callback_obj) {
if (typeof callback === "string") {
callback = callback_obj[callback];
}
//...
if (typeof callback === "function") {
callback.call(callback_obj, found);
}
// ...
};
Asynchronous Event Listeners
document.addEventListener("click", console.log, false);
Timeouts
var thePlotThickens = function () { console.log('500ms later...'); }; setTimeout(thePlotThickens, 500);
Callbacks in Libraries
Focus on core functionality and provide “hooks” in the form of callbacks, which will allow the library methods to be easily built upon, extended, and customized.