CODEWITHSUNDEEP
javascript
Masyaf
Masyaf

Reputation: 841

Confused about callback

I started studying JS and came across callbacks and promises. I am a little confused, read dozens of sources, but could not exactly find answer. For example a code from mozilla

var xmlhttp = new XMLHttpRequest(),
method = 'GET',
url = 'https://developer.mozilla.org/';

xmlhttp.open(method, url, true);
xmlhttp.onload = function (data) {
   console.log(data)
};
xmlhttp.send();

From description of onload :

callback is the function to be executed when the request completes successfully. It receives a ProgressEvent object as its first argument. The value of this (i.e. the context) is the same XMLHttpRequest this callback is related to.

Where does it actually get ProgressEvent from? And how should I differentiate it from 

var myFunc = function (data) {
    console.log(data);
}
myFunc('ALERT!!!');

Should not I pass parameter to the function?

Upvotes: 0

Views: 121

Answers (2)

AL-zami
AL-zami

Reputation: 9066

callbacks are function passed as argument to another function to be executed later.In your case you want to execute something after XMLHttpRequest finish doing its job. So you need to pass a success function to be executed after ajax finish loading it's content.

why we use callback?

after finish loading you might want to do something with the result of http request.You cant do it in the onload handler.

xmlhttp.onload = function(result){
    // do stuff with result
}

But you will need to write a lot of code inside the onload event handler.So by passing callback you can keep the workspace clean.Write code for processing the result inside the callback.See the following code

 function ajax(callback){

  var xmlhttp = new XMLHttpRequest(),
  method = 'GET',
  url = 'https://developer.mozilla.org/';

  xmlhttp.open(method, url, true);
  xmlhttp.onload = function (data) {
     callback(data) // your callback will execute after http request finish loading
  };
  xmlhttp.send();

}

function success(result){ // this function will be used as callback 
   // do stuff with result.
}

// call ajax function and pass the callback function to be executed after loading

ajax(success)

ProgressEvent :

ProgressEvent object contains the data associated with the current request state.The follwoing is your progress event object.See the red underlined properties.loaded is the number of bytes loaded.and total is the total byte to be loaded.This is actually the data size.Thus you can determine how many bytes to be loaded and how many byte actually loaded.If those two properties are similar then the load is complete.That's what onload do.After loading complete both are 191(byte).I have a file that is 191 byte in size.That means the loading is complete.

enter image description here

Upvotes: 3

Álvaro González
Álvaro González

Reputation: 146340

The callback arguments are provided by whatever part of the code executes the function later. In this case, such code is executed by the browser itself and, being a browser library, there's no JavaScript source code you can inspect.

Perhaps it's easier to understand with a pure JavaScript example:

function printMessageInConsole(message) {
    console.log("Message is: %s", message);
}
function doSomeStuff(runThisWhenFinished) {
    runThisWhenFinished("I am finished with it");
}

doSomeStuff(printMessageInConsole);

Upvotes: 1

Related Questions