Comment gérer les problèmes contextuels avec « ceci » en JavaScript lors de l'utilisation de setTimeout ?

setTimeout et "this" en JavaScript

Lors de l'utilisation de la fonction setTimeout dans une méthode de classe, il est possible de rencontrer une erreur indiquant qu'une autre méthode au sein de la classe (par ex. , "method2" dans le code fourni) n'est pas défini après le délai d'attente. Cela est dû à la façon dont JavaScript gère le mot-clé this dans les fonctions imbriquées.

Dans l'exemple de code, la fonction setTimeout est utilisée avec un délai spécifié pour appeler la fonction de méthode dans l'objet de test. La fonction method2 est appelée dans la fonction méthode pour récupérer un élément d'image en fonction d'un identifiant transmis. Au départ, cela fonctionne sans problème.

Cependant, après le délai d'attente, la fonction method2 devient indéfinie en raison de la façon dont elle est liée dans la fonction setTimeout. Par défaut, this fait référence à l'objet global lorsqu'il est appelé comme rappel dans un setTimeout.

Pour résoudre ce problème, une solution consiste à ajouter .bind(this) à la fin de la fonction transmise à setTimeout. Cela garantit que ce contexte est correctement lié à l'objet (dans ce cas, l'objet de test). Dans le code modifié :

<code class="js">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
};</code>

L'utilisation de .bind(this) permet à la fonction method2 de conserver le contexte approprié dans le rappel setTimeout, lui permettant de récupérer et de manipuler avec succès l'élément image.

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!