javascript - 计时器触发事件​​待处理

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 秒调用一次(注意间隔设置为 17ms)

这在快速机器上运行良好，但在真实移动设备上运行(使用 Samsung Galaxy S8 测试)或将 Chrome 性能 CPU 限制设置为 6 倍减速时会出现问题。

Answer 1

超时更多的是一个“请求”，如果设备太忙于做其他事情，比如重新绘制 DOM，并且速度不够快，无法跟上，那么您的延迟会比您想要的更长。

因此，您可能需要在慢速设备上执行不同的操作。除此之外:使用 setTimeout 比 setInterval 更好，在第一次调用完成时设置新的超时。因此事件不会叠加并同时被触发。

引用(检查:延误时间超过指定时间的原因): https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified