Tools for the modern web browser

Backbone.js
Underscore
jQuery
data.js
bootstrap
Highcharts
jQueryUI
Modernizer

JavaScript Callbacks – Black magic?

I have been browsing the net on the lookout for good resources on the callback concept that JavaScript is using. There is alot of confusion on this piece of black magic code especially when you mix it with the async concept.

“In computer programming, a callback is a reference to a piece of executable code, that is passed as an argument to other code. This allows a lower-level software layer to call a subroutine (or function) defined in a higher-level layer.”

“Sometimes a method will invoke web requests that need some time to process, or it may call another method that has to do some processing or is waiting for user input…  These kinds of operations can be implemented asynchronously, and the only way to manage that logic programmatically is with a callback parameter.”

“A callback is nothing more than a delegate. The term callback is used because you generally pass it (the delegate) into a method (as an argument) and is then invoked in that method to signal something.”

“Sync and Async callbacks are that. Synchronous, execute on the same thread that called the method (started the action). Async are generally executed on another thread (but not always).”

“JavaScript is normally synchronous: it executes each line in sequence. Certain functions, however, operate asynchronously: they do not halt execution, yet you need a way to get the results at a later time. To deal with these situations, you usually pass in a callback function that is run when the asynchronous call completes.”

“When you pass a function into another where it will be called, it’s generally known as a callback.”

“Here’s a simple example. There’s nothing too complicated going on here: all we’re doing is passing a callback into the function that’ll get called once the function’s real work is done.”

var printDone = function () {
console.log("done printDone");
};
var doSomeWork = function (whenDone) {
// do some work here
console.log("done doSomeWork ");
whenDone();
};
doSomeWork(printDone);

OR

var doSomeWork = function (whenDone) {
// do some work here
whenDone();
};
doSomeWork(function () {
console.log("done");
});

Sample: callback on custom jQuery extension

Let’s say our custom jQuery extension gets data by making some AJAX request.

$.extend({
  myFunc : function(someArg){
    var url = “http://site.com?q=” + someArg;
    $.getJSON(url, function(data){
        // our function definition hardcoded
    });
  }
});
What is bad in this jQuery code is that the callback function is defined and hardcoded right in the plugin itself. The plugin is not really flexible and its user will have to change the plugin code, which is bad!

So the solution is to define your own custom callback function argument. Here is how it is done:

 $.extend({
  myFunc : function(someArg, callbackFnk){
    var url = “http://site.com?q=” + someArg;
    $.getJSON(url, function(data){
      // now we are calling our own callback function
      if(typeof callbackFnk == ‘function’){
        callbackFnk.call(this, data);
      }
    });
  }
});
$.myFunc(args, function(){
  // now my function is not hardcoded
  // in the plugin itself
});


Credits to;
http://blog.boyet.com/blog/javascriptlessons/javascript-for-c-developers-callbacks-part-i/
http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html

Abit on the side: The Call() method

“The call() method will execute the function it’s called on and set the this variable to the first parameter. All the other parameters are then passed to the function itself.”