Javascript setInterval and `this` solution

Question

I need to access this from my setInterval handler

prefs: null, startup : function()     {         // init prefs         ...         this.retrieve_rate();         this.intervalID = setInterval(this.retrieve_rate, this.INTERVAL);     },  retrieve_rate : function()     {         var ajax = null;         ajax = new XMLHttpRequest();         ajax.open('GET', 'http://xyz.com', true);         ajax.onload = function()         {             // access prefs here         }     } 

How can I access this.prefs in ajax.onload ?

Answer 1

this.intervalID = setInterval(this.retrieve_rate.bind(this), this.INTERVAL); 

Answer 2

The setInterval line should look like this:-

 this.intervalID = setInterval(      (function(self) {         //Self-executing func which takes 'this' as self          return function() {   //Return a function in the context of 'self'              self.retrieve_rate(); //Thing you wanted to run as non-window 'this'          }      })(this),      this.INTERVAL     //normal interval, 'this' scope not impacted here.  );  

Edit: The same principle applies to the " onload ". In this case its common for the "outer" code to do little, it just sets up the request an then sends it. In this case the extra overhead an additinal function as in the above code is unnecessary. Your retrieve_rate should look more like this:-

retrieve_rate : function() {     var self = this;     var ajax = new XMLHttpRequest();     ajax.open('GET', 'http://xyz.com', true);     ajax.onreadystatechanged= function()     {         if (ajax.readyState == 4 && ajax.status == 200)         {             // prefs available as self.prefs         }     }     ajax.send(null); }