Javascript setInterval et `this` solution

Question

J'ai besoin d'accéder this de mon gestionnaire setInterval

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

Comment puis-je accéder à this.prefs ajax.onload?

Answer 1

La ligne setInterval devrait ressembler à ceci: -

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

Modifier: Le même principe vaut pour le "onload". Dans ce cas, il est commun pour le code "externe" de faire peu, il suffit de mettre en place la demande puis l'envoie. Dans ce cas, le surdébit supplémentaire d'une fonction supplémentaire comme dans le code ci-dessus est inutile. Votre retrieve_rate devrait ressembler à ceci: -

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

Ce n'est pas une solution de beauté, mais il est dans l'usage courant:

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

Le comportement par défaut de setInterval est de se lier au contexte mondial. Vous pouvez appeler une fonction membre en enregistrant une copie du contexte en cours. À l'intérieur de retrieve_rate, la variable this sera correctement liée au contexte d'origine. Voici ce que votre code ressemblerait à ceci:

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

Astuce Bonus: Pour une référence de fonction simple (par opposition à une référence d'objet qui a une fonction de membre), vous pouvez modifier le contexte en utilisant call ou apply méthodes de JavaScript.

Answer 5

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

Answer 6

Ce serait la solution la plus propre, puisque la plupart du temps que vous voulez vraiment changer le ce contexte pour la méthode consécutive appelle:

Il est également plus facile de saisir le concept de.

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

Avec l'amélioration visionneur le temps est maintenant bon d'utiliser l'amélioration EcmaScript 6, la méthode flèche =>, pour préserver this correctement.

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

aide => méthode préserve l'this lorsque retrieve_rate() est appelé par l'intervalle. Pas besoin d'auto funky ou passer this dans les paramètres

Answer 8

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

cela est légal en javascript et permet d'économiser beaucoup de code :)