Javascript setInterval and `this` solution
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
?
this.intervalID = setInterval(this.retrieve_rate.bind(this), this.INTERVAL);
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);
}
The default behavior of setInterval
is to bind to the global context. You can call a member function by saving a copy of the current context. Inside retrieve_rate the this
variable will be correctly bound to the original context. Here is what your code would look like:
var self = this;
this.intervalID = setInterval(
function() { self.retrieve_rate(); },
this.INTERVAL);
Bonus tip: For a plain function reference (as opposed to an object reference which has a member function) you can change the context by using JavaScript's call
or apply
methods.
With improving browser support the time is now good to use the EcmaScript 6 enhancement, the arrow =>
method, to preserve this
properly.
startup : function()
{
// init prefs
...
this.retrieve_rate();
this.intervalID = setInterval( () => this.retrieve_rate(), this.INTERVAL);
},
Using => method preserves the this
when retrieve_rate()
is called by the interval. No need for funky self or passing this
in parameters