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 秒调用一次（注意间隔设置为 17 毫秒）

这在快速机器上工作正常，当运行在真实移动设备上（使用 Samsung Galaxy S8 测试）或设置 Chrome 性能 CPU 节流到 6 倍减速时会出现问题.

Answer 1

超时更 'request'，如果设备太忙于做其他事情，比如重新绘制 DOM 并且速度不够快，无法跟上，你的延迟时间会比你长想要.

所以您可能需要在慢速设备上做一些不同的事情。除此之外：最好使用 setTimeout 而不是 setInterval，在第一次调用完成时设置一个新的超时时间。所以事件不会叠加并同时被触发。

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

Timer Fired 事件未决

Timer Fired event is pending

javascript

zone.js

angular