setTimeout() funktioniert nicht mit jQuery (this)

Question

Ich habe dieses Stück Skript hier, wo ich gerne meine ul Element nach oben schieben würde, dann nach dem slide-up ausgeführt, möchte ich entfernen die "open" -Klasse für CSS-Gründe. Was mache ich falsch?

jQuery(this).parent().children("ul").slideUp(500); 
 
setTimeout(function(){ 
 
    var elementToRemove = jQuery(this).parent(); 
 
    elementToRemove.removeClass("open"); 
 
}, 500);

Answer 1

this innerhalb Sie Callback-Funktion bezieht sich auf das globale Objekt und nicht das Ereignis-Ziel.

Zwei Lösungen:

Pfeil Funktionen (die den this Kontext erhalten):

jQuery(this).parent().children("ul").slideUp(500); 
setTimeout(() => { 
    var elementToRemove = jQuery(this).parent(); 
    elementToRemove.removeClass("open"); 
}, 500); 

oder einen Link zu dem this Objekt speichern:

jQuery(this).parent().children("ul").slideUp(500); 
let that = this; 
setTimeout(function(){ 
    var elementToRemove = jQuery(that).parent(); 
    elementToRemove.removeClass("open"); 
}, 500); 

Answer 2

Lösung 1

Verwenden bind den Kontext an die Funktion

jQuery(this).parent().children("ul").slideUp(500); 

var func = function(){ 
    var elementToRemove = jQuery(this).parent(); 
    elementToRemove.removeClass("open"); 
} 
setTimeout(func.bind(this),500); 

Lösung 2

jQuery(this).parent().children("ul").slideUp(500); 
var self = this; 
setTimeout(function(){ 
    var elementToRemove = jQuery(self).parent(); 
    elementToRemove.removeClass("open"); 
}, 500); 

Answer 3

jQuery Animationen für ein zusätzliches optionalen pararameter passieren lassen (ein Rückruf) genannt complete in der Dokumentation, die einmal ausgeführt werden Die Animation ist fertig. Sie können es wie folgt verwenden:

jQuery(this).parent() 
      .children("ul") 
      .slideUp(500, function(){ 
       var elementToRemove = jQuery(this).parent(); 
       elementToRemove.removeClass("open"); 
      });