Как добиться постоянной работы setTimeout?

Question

[aftar]

Здравствуйте! Есть код

//-Каталог
    $(".jet-box-effect-8, .jet-box-effect-7").each( function(index, element) {
        var catalogItem = $(this);
        var catalogButton = $(this).find(".catalog__front-price-order");

        catalogButton.click(function(){
            catalogItem.addClass('flipped');
            catalogItemActive();
        });

        function catalogItemActive () {
            setTimeout(function () {    
                if (!(catalogItem.is(':hover'))) {  //-Если курсор вне элемента убрать класс
                    catalogItem.removeClass('flipped');
                }
                else {                              //-Если курсор на элементе, убрать класс после того, как будет вне его
                    catalogItem.mouseout(function () {
                        $(this).removeClass('flipped');
                    });
                }
                console.log('test')
            }, 1000);
        }
    });

При срабатывания условия else setTimeout перестает работать
https://codepen.io/anon/pen/zQjKrm

Comments

[edward_freedom]

так он не для этих целей сделан, тебе надо setinterval

[aftar]

edward_freedom, пробовал не помогло

[edward_freedom]

aftar, не в курсе, что значит не помогло, мне помогло

[aftar]

edward_freedom, https://codepen.io/anon/pen/zQjKrm

Answer 1

[forspamonly2]

вы добавляете обработчики событий и не убираете их. у вас срабатывает оставшийся с прошлого раза mouseout. верните setTimeout и поменяйте catalogItem.mouseout(function () { на catalogItem.one('mouseout', function () {

но вообще так делать не надо. если я правильно понял вашу логику, её можно сделать на простом цсс, повесив перевёрнутое состояние на :hover и :active и добавив анимацию переворота обратно с нужной вам задержкой

Comments

[aftar]

Огромное спасибо! Через hover и active не сделаешь.
Вот сама анимация карточек.


Только в моем случае она должна перевернуться по клику на кнопки.
И если пользователь сразу уберет курсор с нее, чтобы она не дергалась, не переворчивалась в исходное состояние, он может не понять в чем дело.
Для этого и было принято решение через секунду проверить если курсор на ней, дождаться пока он выйдет за ее пределы и перевернуть в исходное состояние.
Либо перевернуть если он сразу за ее пределами.

Answer 2

[Шохрух Шаймардонов]

Замените setTimeout на setInterval

Comments

[aftar]

тогда вообще не корректно работает

[Шохрух Шаймардонов]

aftar, и как это некорректно? И покажите как должно быть

[aftar]

Шохрух Шаймардонов, https://codepen.io/anon/pen/zQjKrm

Еще раз повторюсь задача такая. При клике на кнопку должен добавиться класс.
Через секунду проверить если курсор на элементе, дождаться пока он выйдет за его пределы и убрать класс.
Либо если курсор сразу за пределами элемента, убрать класс.