JavaScript: setInterval() problem

Have you been trying to write some class like this:

function y() {
  this.x = 0;
  this.start = function () {
      this.interval = setInterval(this.run, 1000);
  };

  this.run = function () {
      this.x++;
      debug(this.x); // or some other things you want to do
  };

  this.stop = function () {
      clearInterval(this.interval);
  };
}

You may attempt to refer the x in the run() function. However, in JavaScript, the scope of the function becomes the window after running setInterval() (or setTimeout()).

To solve the problem, the code be written like this:

function y() {
   this.x = 0;
   var self;

   this.start = function () {
       self = this;
       this.interval = setInterval(run, 1000);
   };

   function run() {
       self.x++;
       debug(self.x);
   }

   this.stop = function () {
       clearInterval(this.interval);
       self = undefined;
   };
}

Since using the self variable will create a cyclic reference, it should be cleaned up properly. Otherwise, the garbage collector of the script interpreter(s) which use(s) reference count will not be able to collect the instance.

Update (2009-03-29)
Thanks to the comment by dedogs, we could actually write the code like this without the cyclic reference:

function y() {
  this.x = 0;
  this.start = function () {
      var self = this;
      this.interval = setInterval(function(){ self.run(); }, 1000);
  };

  this.run = function () {
      this.x++;
      debug(this.x); // or some other things you want to do
  };

  this.stop = function () {
      clearInterval(this.interval);
  };
}

AJAX: XMLHTTPRequest Event Handling

Most of the XMLHTTPRequest uses the following implementation:

function run1() {
  xmlhttp = new XMLHTTPRequest();
  xmlhttp.onreadystatechange = processStateChange;
  ...
}

function processStateChange() {
  if (xmlhttp.readyState == 4) ...
}

The problem is, when you have many events to handle, the variable xmlhttp in run1 may have assigned to different instances by different functions (e.g. run2, run3, etc). If you rely on this code, no one can gaurentee that your code will run correctly.

The resolve this problem you can try to write the code in this way:

function run1() {
  var xmlhttp = new XMLHTTPRequest();
  xmlhttp.onreadystatechange = function() { ... }
}

If you insist to write the handle in a function, here is another style of writing it:

function run1() {
  var xmlhttp = new XMLHTTPRequest();
  xmlhttp.onreadystatechange = function() {
    processStateChange(xmlhttp);
  }
  ...
}

function processStateChange(xmlhttp) { ... }