setTimeout() не работает с jQuery (это)

Question

У меня есть этот сценарий здесь, где я хотел бы сдвинуть мой элемент ul, а затем после выполнения слайда я хотел бы удалить «открытый» класс для CSS. Что я делаю не так?

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

Answer 1

this внутри вас функция обратного вызова относится к глобальному объекту и не целевое событие.

Два решения:

функции Используйте стрелки (которые сохраняют this контекст):

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

или сохранить ссылку на this объекта:

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

Answer 2

Решение 1

Использование bind передать контекст функции

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

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

Раствор 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 анимации позволяют за дополнительную опциональной pararameter (обратный вызов) называется complete в документы, которые будут выполняться один раз анимация выполнена. Вы можете использовать его следующим образом:

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