Javascript 如何仅启动一次鼠标滚轮滚动

我正在尝试用鼠标滚轮滚动来做一些动作。我希望无论你滚动轮子有多快或多少次，它都算作“一”。现在，如果你快速滚动，它将计数更多次

---

保存滚动方向并在类似情况下使用

scrollDirection:'up'|'down';
   @HostListener('wheel', ['$event']) onMouseScroll(e) {
    if (e.deltaY < 0 && this.scrollDirection !='up') {
      console.log('scrolling up');
      this.scrollDirection='up';
    } else if (e.deltaY > 0 && this.scrollDirection !='down') {
      console.log('scrolling down');
      this.scrollDirection='down';
    }
  }

滚动方向：'up'|'down'；
@鼠标滚动（e）上的HostListener（'wheel'，['$event']）{
如果（e.deltaY<0&&this.scrollDirection！='up'）{
log（“向上滚动”）；
这个。向上滚动；
}否则如果（e.deltaY>0&&this.scrollDirection！='down'）{
log（“向下滚动”）；
这个。滚动方向为“向下”；
}
}

---

有一个计时器，可在一定时间内限制滚动，并保留滚动方向以检测滚动方向的变化

import { Directive, HostListener } from '@angular/core';
import { timer } from 'rxjs';
@Directive({
  selector: '[appMouseScroll]'
})
export class MouseScrollDirective {
  Ttimer;
  isMouseWheelInRogress;
  scrollUp;

  @HostListener('wheel', ['$event']) onMouseScroll(e) {

    if (!this.isMouseWheelInRogress || (!this.scrollUp && e.deltaY < 0 || this.scrollUp && e.deltaY > 0)) {
      if (this.Ttimer) {
        this.Ttimer.unsubscribe();
      }
      this.Ttimer = timer(500).subscribe(() => {
        this.isMouseWheelInRogress = false;
      });

      if (e.deltaY < 0) {
        this.scrollUp = true;
        console.log('scrolling up');
      } else if (e.deltaY > 0) {
        this.scrollUp = false;
        console.log('scrolling down');
      }
    }
    this.isMouseWheelInRogress = true;
  }
}

从'@angular/core'导入{指令，HostListener}；
从'rxjs'导入{timer}；
@指示({
选择器：“[appMouseScroll]”
})
导出类mousescroll指令{
蒂默；
正在前进的车轮；
向上滚动；
@鼠标滚动（e）上的HostListener（'wheel'，['$event']）{
如果（！this.ismouseheelinrogress | | |（！this.scrollUp&e.deltaY<0 | | this.scrollUp&e.deltaY>0））{
if（this.Ttimer）{
此.Ttimer.unsubscribe（）；
}
this.Ttimer=计时器（500）.subscribe（（）=>{
this.ismouseheelinrogress=false；
});
如果（e.deltaY<0）{
this.scrollUp=true；
log（“向上滚动”）；
}否则，如果（e.deltaY>0）{
this.scrollUp=false；
log（“向下滚动”）；
}
}
this.ismouseheelinrogress=true；
}
}

为了避免所有滚动事件而只触发最后一个事件，您需要在那里设置一个超时功能

下面是一个例子。

---

这里有一个纯javascript解决方案：