OOP with Javascript and callback function

Question

Didn't know how to formulate the question so feel free to change it if you want.

So what's wrong with my code?

(function() {
//--> DOM is ready

  var _$ = {
    g: function(u,c){              // c is callback function
      x=new XMLHttpRequest();
      x.onreadystatechange = function(c){ // same c isn't it?!
        d="", e=null;
        if (x.readyState==4) {
          if (x.status==200) { d = x.responseText; }
          else { e = x.statusText; }
          c(e,d);                  // how come c is an object
                                   // and not a function here?!
        }
      }
      x.open("GET",u,true); x.send(null);
    }
  }

  //--> Call our method:
  _$.g("http://copy.com/K8UjOnVoyUCiNmPC/qcm/0/1/2.json",
    function(e,d){
      if(!e){
        window.alert(d);
      }
    }
  );

//--> .DOM
})();

Any clues what am I missing here? How to make it right?

Thanks!

Including c in the formal parameter list is the same as declaring c with var in the very first line of the function: it creates a new local variable c, it doesn't reference the "outer" c. — RobG
– RobG, Commented Mar 14, 2014 at 3:53

Sumner Evans · Accepted Answer · 2014-03-14 03:44:14Z

You actually aren't passing in the same c into the x.onreadstatechange function, rather, you are defining a parameter which is specified by the onreadystatechange event. Here is what you need to do:

.
.
.
var _$ = {
    g: function(u, c) {
        x = new XMLHttpRequest();
        x.onreadystatechange = function() { // <== REMOVE: c as parameter
            d = "", e = null;
            if (x.readyState == 4) {
                if (x.status == 200) { d = x.responseText; }
                else { e = x.statusText; }
                c(e, d); // Now c is the c that you passed into g
            }
        }
        x.open("GET", u, true);
        x.send(null);
    }
}
.
.
.

Thanks man! Made my day. I've seen too much code for today! XD I'll pick your answer as the correct one. ;)

Harvey A. Ramer · Accepted Answer · 2014-03-14 03:49:00Z

The problem is that the c in your onreadystatechange callback is a progress event object. The solution to that problem is to simply remove that parameter and let the parent method _$.g with it's c parameter provide a closure that lets you refer to the callback like this:

 (function() {
//--> DOM is ready

  var _$ = {
    g: function(u,c){              // c is callback function
      x=new XMLHttpRequest();
      x.onreadystatechange = function(){ // same c isn't it?! No, it's a progress event object
        d="", e=null;
        if (x.readyState==4) {
          if (x.status==200) { x.responseText; }
          else { e = x.statusText; }
          c(e,x.response);                  // how come c is an object
                                   // and not a function here?!
        }
      }
      x.open("GET",u,true); x.send(null);
    }
  }

  //--> Call our method:
  _$.g("http://copy.com/K8UjOnVoyUCiNmPC/qcm/0/1/2.json",
    function(e,d){
      if(!e){
        window.alert(d);
      }
    }
  );

//--> .DOM
})();

I hope this helps!

Collectives™ on Stack Overflow

OOP with Javascript and callback function

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related