Timer Fired事件正在等待

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）

这在快速机器上运行良好，在真实移动设备（使用三星Galaxy S8测试）上运行或将Chrome Performance CPU限制设置为6倍减速时会出现问题。

Answer 1

超时更像是一个“请求”，如果设备太忙于做其他事情，比如重新绘制DOM并且速度不够快，那么延迟时间就会超过你想要的延迟。< / p>

因此，您可能需要在慢速设备上执行不同的操作。除此之外：最好使用setTimeout而不是setInterval，在第一次调用完成时设置新的超时。所以事件不会在同一时间堆积起来并被解雇。

参考（检查：延迟超过指定的原因）： https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified