original thread http://recurial.com/programming/understanding-callback-functions-in-javascript/
example js code,
function some_function2(url, callback) {
var httpRequest; // create our XMLHttpRequest object
if (window.XMLHttpRequest) {
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Internet Explorer is stupid
httpRequest = new
ActiveXObject("Microsoft.XMLHTTP");
}
httpRequest.onreadystatechange = function() {
// inline function to check the status
// of our request
// this is called on every state change
if (httpRequest.readyState === 4 &&
httpRequest.status === 200) {
callback.call(httpRequest.responseXML);
// call the callback function
}
};
httpRequest.open('GET', url);
httpRequest.send();
}
// call the function
some_function2("text.xml", function() {
console.log(this);
});
console.log("this will run before the above callback");
the explanation in this thread,
In this example we create the httpRequest object and load an XML file. The typical paradigm of returning a value at the bottom of the function no longer works here. Our request is handled asynchronously, meaning that we start the request and tell it to call our function when it finishes.
We’re using two anonymous functions here. It’s important to remember that we could just as easily be using named functions, but for sake of brevity they’re just written inline. The first anonymous function is run every time there’s a state change in our httpRequest object. We ignore it until the state is 4 (meaning it’s done) and the status is 200 (meaning it was successful). In the real world you’d want to check if the request failed, but we’re assuming the file exists and can be loaded by the browser. This anonymous function is assigned to httpRequest.onreadystatechange, so it is not run right away but rather called every time there’s a state change in our request.
When we finally finish our AJAX request, we not only run the callback function but we use the call() function. This is a different way of calling a callback function. The method we used before of just running the function would work fine here, but I thought it would be worth demonstrating the use of the call() function. Alternatively you could use the apply() function (the difference between the two is beyond the scope of this tutorial, but it involves how you pass arguments to the function).
The neat thing about using call() is that we set the context in which the function is executed. This means that when we use the this keyword inside our callback function it refers to whatever we passed as the first argument for call(). In this case, when we refer to this inside our anonymous callback function we are referring to the responseXML from the AJAX request.
Finally, the second console.log statement will run before the first, because the callback isn’t executed until the request is over, and until that happens the rest of the code goes right on ahead and keeps running.
Finally, these are the questions i have.
The first anonymous function is run every time there’s a state change in our httpRequest object.
okay, i checked with debug mode that this anonymous function is calling everytime until readyState == 4. But who is calling this every time function???
2) Cannot understand the difference usage between call(), callback.call() , callback.apply()
my question is, if i change the code like
callback(httpRequest.responseXML);
// call the function
some_function2("text.xml", function(response) {
console.log(response);
});
isn't this same as the original code?
async and callback is really HARD:(
