Javascript setInterval e `this` soluzione

Question

ho bisogno di accedere this dal mio setInterval gestore

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 
     } 
    } 

Come posso accedere this.prefs in ajax.onload?

Answer 1

La linea setInterval dovrebbe essere simile a questo: -

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: Lo stesso principio vale per il "onload". In questo caso è comune che il codice "esterno" faccia poco, imposta semplicemente la richiesta e quindi la invia. In questo caso l'overhead extra è una funzione additiva come nel codice sopra non è necessaria. Il tuo retrieve_rate dovrebbe guardare più in questo modo: -

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); 
} 

Answer 2

che non è una soluzione di bellezza, ma è di uso comune:

var self = this; 
var ajax = null; 
//... 
ajax.onload = function() { 
    self.prefs....; 
} 

Answer 3

prefs: null, 
startup : function() 
    { 
     // init prefs 
     ... 
     this.retrieve_rate(); 
     var context = this; 
     this.intervalID = setInterval(function() 
             { 
              context.retrieve_rate(); 
             }, this.INTERVAL); 
    }, 

retrieve_rate : function() 
    { 
     var ajax = null; 
     ajax = new XMLHttpRequest(); 
     ajax.open('GET', 'http://xyz.com', true); 
     var context = this; 
     ajax.onload = function() 
     { 
      // access prefs using context. 
      // e.g. context.prefs 
     } 
    } 

Answer 4

Il comportamento predefinito di setInterval è di legarsi al contesto globale. È possibile chiamare una funzione membro salvando una copia del contesto corrente. All'interno di retrieve_rate la variabile this sarà correttamente associata al contesto originale. Ecco ciò che il codice sarà simile:

var self = this; 
this.intervalID = setInterval(
    function() { self.retrieve_rate(); }, 
    this.INTERVAL); 

Bonus suggerimento: Per un riferimento funzione di pianura (al contrario di un riferimento a un oggetto che ha una funzione membro) è possibile modificare il contesto utilizzando call o apply metodi di JavaScript.

Answer 5

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

Answer 6

Questa sarebbe la soluzione più pulita, poiché la maggior parte del tempo si vuole realmente cambiare il questo contesto per il metodo consecutivo chiamate:

Inoltre è più facile da afferrare il concetto di.

// store scope reference for our delegating method 
    var that = this; 
    setInterval(function() { 
     // this would be changed here because of method scope, 
     // but we still have a reference to that 
     OURMETHODNAME.call(that); 
    }, 200); 

Answer 7

Con il miglioramento del browser supporta il tempo è ora bene utilizzare la valorizzazione EcmaScript 6, il metodo freccia =>, per preservare this correttamente.

startup : function() 
    { 
     // init prefs 
     ... 
     this.retrieve_rate(); 
     this.intervalID = setInterval(() => this.retrieve_rate(), this.INTERVAL); 
    }, 

Usando => metodo conserva la this quando retrieve_rate() viene chiamato dall'intervallo. Non c'è bisogno di auto funky o passando this nei parametri

Answer 8

window.setInterval(function(){console.log(this)}.bind(this), 100)

questo è legale in javascript e fa risparmiare un sacco di codice :)