Utilisation de setTimeout et préservation du contexte avec cela en JavaScript

Lorsque vous utilisez la fonction setTimeout en JavaScript, il est essentiel d'être conscient de la façon dont elle gère le contexte de ceci. Cela devient particulièrement pertinent lors de l'appel de méthodes définies dans un contexte différent dans le rappel du délai d'attente.

Dans l'extrait de code fourni, la fonction de méthode appelle la méthode2, qui récupère un élément d'image en fonction d'un ID transmis et définit sa propriété src. . Initialement, la méthode2 s'exécute avec succès. Cependant, après le délai setTimeout, une erreur se produit car la fonction method2 n'est plus définie dans le contexte prévu.

Le problème survient car setTimeout crée un nouveau contexte d'exécution et le mot clé this est par défaut l'objet global. Dans le code fourni, la fonction de méthode est invoquée à l'aide du contexte du prototype de test, mais lorsque le rappel de délai d'attente s'exécute, ce contexte est devenu l'objet global.

Solution :

Pour préserver le contexte prévu dans le rappel du délai d'attente, vous pouvez utiliser la méthode .bind() pour définir explicitement la liaison du contexte. En ajoutant .bind(this) à la fin de la fonction transmise à setTimeout, vous pouvez vous assurer que ceci dans la fonction de rappel fait référence au contexte prévu.

Dans l'extrait de code mis à jour :

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

En ajoutant .bind(this), le mot-clé this dans la fonction de rappel sera lié au prototype de test, permettant à la méthode2 d'être appelée correctement dans le contexte de la méthode prototype même après le délai setTimeout.