Почему не удаляется класс по setTimeout?

Question

[ymfront]

По клику на элемент нужно добавить класс, а через секунду удалить его. Добавление класса работает, а вот удаление не работает. В консоли нет никаких ошибок. В чем может быть проблема? Если в setTimeout добавить alert("text"), то alert выскакивает.

$(".box43z6r6QZ").click(function(){

    $(this).addClass("hG8KlY3Q");

    setTimeout(function(){
        $(this).removeClass("hG8KlY3Q");
    }, 1000);

});

HTML:

<div class="box32TgUoAy">
	<span class="box43z6r6QZ 43z6r6QZ__tl">tl</span>
	<span class="box43z6r6QZ 43z6r6QZ__tr">tr</span>
	<span class="box43z6r6QZ 43z6r6QZ__bl">bl</span>
	<span class="box43z6r6QZ 43z6r6QZ__br">br</span>
</div>

Comments

[scottparker]

а на что this указывает в setTimeout?

Answer 1

[Алексей Уколов]

Классическая потеря this. Правда, странно, что при этом нет ошибок в консоли, когда вы на window пытаетесь removeClass вызвать.

$(".box43z6r6QZ").click(function(){
   var $el = $(this);

    $el.addClass("hG8KlY3Q");

    setTimeout(function(){
        $el.removeClass("hG8KlY3Q");
    }, 1000);
});

Answer 2

[alexalexes]

Еще в добавок к ответу Алексей Уколов могу сказать, что можно выстрелить себе в ногу this или item параметром при итерации foreach какой-нибудь коллекции.
Решается такой конструкцией передачи параметра:

setTimeout((function(this_is_this)
{
   retrun function()
   {
        $(this_is_this).removeClass("hG8KlY3Q");
    }
})(this), 1000);

Здесь используется анонимная функция function(this_is_this), которая превращает контекст this просто в локальный параметр, который передается через замыкание во вложенную функцию.

Comments

[Дмитрий Беляев]

setTimeout умеет параметры в колбэк передавать:

setTimeout(function(this_is_this) {
    $(this_is_this).removeClass("hG8KlY3Q");
}, 1000, this);

Answer 3

[persol]

Используйте стрелочную функцию, она позволит вам не выходить из текущего контекста, у нее нет this и данный код будет работать:

$(".box43z6r6QZ").click(function(){

    $(this).addClass("hG8KlY3Q");

    setTimeout(() => {
        $(this).removeClass("hG8KlY3Q");
    }, 1000);
});