Comment conserver la référence « this » lors de l'utilisation de setTimeout en JavaScript ?

setTimeout et l'insaisissable "this" en JavaScript

Lors de l'utilisation de la fonction setTimeout, les développeurs rencontrent souvent un problème où les appels ultérieurs aux méthodes perdent leur contexte prévu, ce qui donne lieu à des méthodes apparemment indéfinies. Ceci est généralement dû à la perte de la référence « this ».

Le problème :

Considérez le code suivant :

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

test.prototype.method2 = function(name) {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};

On chargement initial de la page, la fonction method2 fonctionne comme prévu. Cependant, après avoir défini le délai d'attente, les appels suivants à method2 entraînent une erreur indiquant qu'il n'est pas défini.

La solution :

Le problème principal réside dans la façon dont setTimeout gère le ce mot-clé. Lors de la définition d'un délai d'attente à l'aide de setTimeout(this.method, 5000), le contexte est perdu, ce qui entraîne l'erreur.

Une solution intelligente à ce problème consiste à utiliser la méthode bind(). En ajoutant ".bind(this)" à la fin de l'appel de méthode, le contexte peut être explicitement lié, garantissant que la référence "this" correcte est conservée même après l'expiration du délai.

Code amélioré :

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

Avec cette modification, le contexte de "this" est correctement lié, permettant à la méthode2 de continuer à fonctionner comme prévu après l'expiration du délai d'attente. Cette approche est à la fois élégante et efficace pour préserver le bon contexte d'exécution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!