Verwenden von setTimeout und Beibehalten des Kontexts damit in JavaScript

Bei der Verwendung der setTimeout-Funktion in JavaScript ist es wichtig, sich darüber im Klaren zu sein, wie sie funktioniert den Kontext dazu. Dies wird besonders relevant, wenn Methoden aufgerufen werden, die in einem anderen Kontext innerhalb des Timeout-Callbacks definiert sind.

Im bereitgestellten Code-Snippet ruft die Methodenfunktion Methode2 auf, die ein Bildelement basierend auf einer übergebenen ID abruft und seine src-Eigenschaft festlegt . Methode2 wird zunächst erfolgreich ausgeführt. Nach der setTimeout-Verzögerung tritt jedoch ein Fehler auf, da die Funktion method2 nicht mehr im vorgesehenen Kontext definiert ist.

Das Problem tritt auf, weil setTimeout einen neuen Ausführungskontext erstellt und das Schlüsselwort this standardmäßig das globale Objekt verwendet. Im bereitgestellten Code wird die Methodenfunktion mit dem Kontext des Testprototyps aufgerufen, aber wenn der Timeout-Callback ausgeführt wird, hat sich dieser Kontext in das globale Objekt geändert.

Lösung:

Um den beabsichtigten Kontext innerhalb des Timeout-Callbacks beizubehalten, können Sie die .bind()-Methode verwenden, um die Bindung des Kontexts explizit festzulegen. Durch Anhängen von .bind(this) an das Ende der Funktion, die an setTimeout übergeben wird, können Sie sicherstellen, dass sich dies innerhalb der Rückruffunktion auf den beabsichtigten Kontext bezieht.

Im aktualisierten Codeausschnitt:

test.prototype.method = function()
{
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

Durch Hinzufügen von .bind(this) wird das Schlüsselwort this innerhalb der Rückruffunktion an den Testprototyp gebunden, sodass Methode2 auch nach der setTimeout-Verzögerung korrekt im Kontext der Prototypmethode aufgerufen werden kann.