Событие сработало по таймеру

Question

У меня есть код для жеста смахивания, основные части:

this.topSlide = this.elementRef.nativeElement.querySelector('.product_rate_slide');
if (this.topSlide) {
    this.topSlide.addEventListener('touchstart', this.handleTouchStart);
    this.topSlide.addEventListener('touchmove', this.handleTouchMove);
    this.topSlide.addEventListener('touchend', this.handleTouchEnd);
}

и это часть обработчика для TouchEnd:

private handleTouchEnd = (evt) => {
    if (this.left > 150) {
        const rightInterval = setInterval(() => {
            this.left += 30;
            if (this.left > 500) {
                clearInterval(rightInterval);
                this.removeTopSlide();
                this.addListener();
                this.slideSwiped.emit(evt);
            }
            this.cdr.detectChanges();
        }, 17);

Код внутри setInterval вызывается каждые 2 секунды (обратите внимание, что интервал установлен на 17 мс)

Это хорошо работает на быстрых машинах, проблема возникает при работе на реальном мобильном устройстве (протестированном с Samsung Galaxy S8) или при настройке производительности процессора Chrome на 6-кратное замедление.

Answer 1

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

Так что может случиться так, что вам нужно сделать что-то другое на медленных устройствах. Кроме того: лучше использовать setTimeout, чем setInterval, установить новый тайм-аут после завершения первого вызова. Таким образом, события не складываются и не запускаются одновременно.

Ссылка (отметьте: причины задержек превышают указанные): https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout