Javascript setInterval und `this` Lösung

Ich muss thisvon meinem setIntervalHandler aus zugreifen

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

Wie kann ich auf this.prefs zugreifen ajax.onload?

Die setInterval-Zeile sollte folgendermaßen aussehen: -

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

Bearbeiten : Das gleiche Prinzip gilt für das " onload". In diesem Fall ist es üblich, dass der "äußere" Code wenig bewirkt. Er richtet lediglich die Anforderung ein und sendet sie dann. In diesem Fall ist der zusätzliche Aufwand für eine zusätzliche Funktion wie im obigen Code nicht erforderlich. Ihre retrieve_rate sollte ungefähr so ​​aussehen: -

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

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

Das Standardverhalten von setIntervalist das Binden an den globalen Kontext. Sie können eine Mitgliedsfunktion aufrufen, indem Sie eine Kopie des aktuellen Kontexts speichern. Innerhalb von retrieve_rate wird die thisVariable korrekt an den ursprünglichen Kontext gebunden. So würde Ihr Code aussehen:

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

Bonus-Tipp: Für eine einfache Funktionsreferenz (im Gegensatz zu einer Objektreferenz mit einer Elementfunktion) können Sie den Kontext mithilfe von JavaScript calloder applyMethoden ändern .

Mit Verbesserung der Browser - Unterstützung ist die Zeit nun gut , die verwenden EcmaScript 6 Erweiterung, auf die Pfeil - =>Methode , erhalten thisrichtig.

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

Mit der Methode => wird das thisWann beibehalten, das retrieve_rate()vom Intervall aufgerufen wird. Keine Notwendigkeit für funky Selbst oder Übergabe thisvon Parametern

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

Dies ist legal in Javascript und spart viel Code :)

Dies wäre die sauberste Lösung, da Sie diesen Kontext die meiste Zeit tatsächlich für Ihre aufeinander folgenden Methodenaufrufe wechseln möchten:

Es ist auch einfacher, das Konzept von zu verstehen.

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

Bei modernen Browsern ermöglicht die setInterval-Methode zusätzliche Parameter, die nach Ablauf des Timers an die von func angegebene Funktion übergeben werden.

var intervalID = scope.setInterval (func, delay [, param1, param2, ...]);

Daher kann eine mögliche Lösung sein:

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

Eine Demo:

var timerId;
document.querySelector('#clickMe').addEventListener('click', function(e) {
    timerId = setInterval(function (self) {
        self.textContent = self.textContent.slice(0, -1);
        if (self.textContent.length == 0) {
            clearInterval(timerId);
            self.textContent = 'end..';
        }
    }, 250, this);
})

<button id="clickMe">ClickMe</button>

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

Das ist keine Schönheitslösung, wird aber allgemein verwendet:

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