Comment puis-je conserver le contexte « ce » correct dans les rappels setTimeout ?

Préserver le contexte dans les rappels setTimeout avec "this"

Lorsque vous utilisez setTimeout pour planifier un rappel après un délai, il est courant de vouloir accéder contexte à partir de la fonction où l’appel setTimeout a été effectué. Cependant, il est important de savoir que setTimeout exécute le rappel avec "this" pointant vers l'objet global, ce qui peut entraîner un comportement inattendu si votre rappel fait référence à des membres de l'instance.

Pour résoudre ce problème, il existe plusieurs approches :

1. Stocker une référence au contexte :

La solution la plus simple consiste à enregistrer une référence au contexte correct avant d'appeler setTimeout. Cette référence peut ensuite être transmise à la fonction de rappel en paramètre.

var that = this;
if (this.options.destroyOnHide) {
    setTimeout(function() { that.tip.destroy() }, 1000);
}

2. Utiliser la méthode bind (ES5) :

La méthode bind peut être utilisée pour créer une nouvelle fonction qui a une valeur "this" prédéterminée. Cela élimine le besoin d'enregistrer manuellement une référence au contexte.

if (this.options.destroyOnHide) {
    setTimeout(function(){ this.tip.destroy() }.bind(this), 1000);
}

3. Utiliser les fonctions fléchées (ES6) :

Les fonctions fléchées n'ont pas leur propre valeur "this". Au lieu de cela, ils héritent de la valeur « this » de la portée lexicale englobante. Cela les rend idéaux pour préserver le contexte dans les rappels.

if (this.options.destroyOnHide) {
    setTimeout(() => { this.tip.destroy() }, 1000);
}

4. Passer le contexte en tant qu'argument (ES5) :

En HTML5, vous pouvez transmettre des arguments à la fonction de rappel de setTimeout. Cela vous permet de spécifier explicitement le contexte à utiliser.

if (this.options.destroyOnHide) {
    setTimeout(function(that){ that.tip.destroy() }, 1000, this);
}

En comprenant ces approches, vous pouvez efficacement maintenir le contexte correct dans vos rappels setTimeout et éviter un comportement inattendu.

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!