Comment préserver le contexte avec « this » lors de l'utilisation de « setTimeout » en JavaScript ?

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

Lors de l'utilisation de 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 en utilisant le contexte du prototype de test, mais lorsque le rappel du 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 this 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.

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!