Javascript setInterval und `this`-Lösung

Question 1

Ich muss zugreifen this Von meinem 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
        }
    }

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

Question 2

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

Question 3

Die Zeile setInterval sollte so 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 die ” onload “. In diesem Fall ist es üblich, dass der “äußere” Code wenig tut, er richtet nur die Anfrage ein und sendet sie dann. In diesem Fall ist der zusätzliche Overhead einer zusätzlichen Funktion wie im obigen Code unnötig. Ihre retrieve_rate sollte besser aussehen so was:-

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

Question 4

Das Standardverhalten von setInterval ist die Bindung an den globalen Kontext. Sie können eine Memberfunktion aufrufen, indem Sie eine Kopie des aktuellen Kontexts speichern. Innerhalb von retrieve_rate die this Variable wird 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 Member-Funktion) können Sie den Kontext mithilfe von JavaScript ändern call oder apply Methoden.

Question 5

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

das ist legal in javascript und spart viel code 🙂

Question 6

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

Auch ist es einfacher, das Konzept von zu begreifen.

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

Question 7

Bei modernen Browsern erlaubt die Methode setInterval zusätzliche Parameter, die nach Ablauf des Timers an die durch func angegebene Funktion durchgereicht werden.

var intervalID = scope.setInterval(Funktion, Verzögerung[, param1, param2, …]);

Eine mögliche Lösung kann daher 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>

Question 8

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