Блог

Главная - Вопросы по программированию - как удалить settimeout или любую альтернативу setTimeout?

как удалить settimeout или любую альтернативу setTimeout?

#javascript

Вопрос:

Я создаю небольшую анимацию, в которой использовал setTimeout . используя setTimeout, моя анимация запаздывает/прерывается .можем ли мы использовать requestAnimationFrame вместо setTimeout. Мне просто нужно удалить некоторые классы через две секунды.

Я думаю requestAnimationFrame , что это лучше, чем setTimeout.

  setTimeout(() => {
                    removeClass(customSlider.Components.Elements.slides[prevIndex].querySelector('.rh02-img'), 'fadeOutLeftImg');
                    removeClass(customSlider.Components.Elements.slides[prevIndex].querySelector('.rh02-img'), 'fadeOutRightImg');
                    removeClass(customSlider.Components.Elements.slides[prevIndex].querySelector('.rh08w5'), 'fadeOutText');
                }, 2000)

можем ли мы преобразовать приведенный выше код с помощью requestAnimationFrame ?

Комментарии:

1. Вам не нужно использовать requestAnimationFrame для этого — на самом деле это прекрасная причина, чтобы использовать setTimeout , если вы хотите сделать что- то после 2-секундной задержки. Используйте только requestAnimationFrame для циклов рендеринга с высокой частотой кадров в секунду. Ваш код, удаляющий эти классы, не является циклом рендеринга — или, по крайней мере, он на это не похож.

2. Почему у вас есть своя собственная removeClass функция? В DOM есть это встроенное.

3. removeClass-это пользовательская функция’

4. @user944513 Да, но почему у вас есть пользовательская функция вместо использования встроенной DOM HTMLElement.prototype.classList.remove('') ?

Ответ №1:

как удалить setTimeout или какую-либо альтернативу setTimeout ?

Я создаю небольшую анимацию, в которой я использовал setTimeout . Используя setTimeout мою задержку анимации/прерывистость

Это звучит прекрасно: действительно, setTimeout не следует использовать для анимационных циклов, так как это то requestAnimationFrame , для чего они предназначены.

Мне просто нужно удалить некоторые классы через две секунды.

Однако это то, для чего вам не следует использовать requestAnimationFrame .

Если вы хотите запустить какой-то код с задержкой в N секунд, вам следует продолжать использовать setTimeout [1]: вот для чего это нужно!.

Однако вы можете упростить и сократить свой код , используя встроенный DOM classList.remove , например:

 const removeClasses = function() {
    const elements = customSlider.Components.Elements.slides[prevIndex].querySelectorAll('.rh08w5, .rh02-img');
    for (const e of elements) {
        e.classList.remove('fadeOutText');
        e.classList.remove('fadeOutLeftImg');
        e.classList.remove('fadeOutRightImg');
    }
};

setTimeout( removeClasses, 2000 );

[1] Или Promise переопределение на основе delay() , но, к сожалению, это все еще не является частью стандартной библиотеки JavaScript/ECMAScript. Но я отвлекся…

Комментарии:

1. спасибо @Dai .. было бы здорово, если бы вы также привели пример requestAnimationFrame в том же примере для целей обучения

2. @user944513 Я не могу, потому что это не то requestAnimationFrame , для чего нужно. Вы не можете (практически) использовать requestAnimationFrame (по назначению) для запуска отложенного кода . Привести пример того, как это сделать, было бы то же самое, что намеренно давать людям плохие советы.

Метки: