RxJS观测值和车轮事件

我想知道是否有人能帮我建立解决方案的理论。我从一个轮子事件中创建一个可观察的对象，阻止默认动作，将其限制在200ms，映射deltaY（我可以使用它来确定方向），然后共享它

我的问题是，它发出的值比我需要的要多，从而造成了这样一种情况，即我的订阅者即使在所需的操作发生后仍会继续开火。我是RxJS的新手，所以请容忍我，但是。。。有没有一种方法可以让我在一系列的值中，比如说，经过X个时间量后，得到“第一个”值，而不让可观察到的值完成

下面是代码

import { fromEvent } from 'rxjs';

const wheel$ = fromEvent(document, 'wheel')
    .pipe(
        tap((event) => event.preventDefault()),
        // throttleTime(200), /* I have tried throttling and debouncing but that doesn't work - values will continue to be emitted */
        map((event) => event.deltaY),
        share()
    )

 // handles scrolling down //
 wheel$.pipe(filter((val) => val > 0))
     .subscribe((event) => {
         if (this.props.isScrolling) return
         this.scrollDown();
     })

一种解决方案是“bufferCount（）

将创建包含3个信号的包。因此，事件将是

[1,2,3]
[4,5,6]
[7,8,9]

或者“throttleTime（xy）”，它会将第一个信号通过，每隔“xy”毫秒忽略一次信号，然后给下一个信号一次机会

interval(500).pipe(
  throttleTime(2000)
).subscribe(data => console.log(data) )

会导致类似的结果

1 // ignore everything the next 2 seconds
5 // ignore everything the next 2 seconds
9 // ignore everything the next 2 seconds
...

问候

一个解决方案是“bufferCount（）

将创建包含3个信号的包。因此，事件将是

[1,2,3]
[4,5,6]
[7,8,9]

或者“throttleTime（xy）”，它会将第一个信号通过，每隔“xy”毫秒忽略一次信号，然后给下一个信号一次机会

interval(500).pipe(
  throttleTime(2000)
).subscribe(data => console.log(data) )

会导致类似的结果

1 // ignore everything the next 2 seconds
5 // ignore everything the next 2 seconds
9 // ignore everything the next 2 seconds
...

---

热情问候

在寻找解决方案时发现了这个问题。 我拿了张地图

fromEvent(el, 'wheel').pipe(
  switchMap(e => 
    concat(
      //wrap the original event, which fires immediately
      of({kind: 'ON_WHEEL', e}),
      // fire a onWheelEnd after a 200ms delay
      // this event is unsubscribed by the switchMap if a new event comes in
      // before the delay
      of({kind: 'ON_WHEEL_END}).pipe(delay(200))
    )
  )
)

---

在寻找解决方案时发现此问题。 我拿了张地图

fromEvent(el, 'wheel').pipe(
  switchMap(e => 
    concat(
      //wrap the original event, which fires immediately
      of({kind: 'ON_WHEEL', e}),
      // fire a onWheelEnd after a 200ms delay
      // this event is unsubscribed by the switchMap if a new event comes in
      // before the delay
      of({kind: 'ON_WHEEL_END}).pipe(delay(200))
    )
  )
)

---

那很有趣。我试过了，但它对我也不起作用，但当我将事件从控制盘更改为单击时，

throttleTime

起作用。我的坏文件一定没有保存，刷新Stackblitz起作用。在应用程序中滚动时，请查看控制台日志。@SamHerrmann感谢您抽出时间解决此问题。我看了你的闪电战。。。如果你执行一个明显的卷轴，第二个事件会慢慢出现，但并不能解决这个问题。这很有趣。我试过了，但它对我也不起作用，但当我将事件从控制盘更改为单击时，

throttleTime

起作用。我的坏文件一定没有保存，刷新Stackblitz起作用。在应用程序中滚动时，请查看控制台日志。@SamHerrmann感谢您抽出时间解决此问题。我看了你的闪电战。。。如果您执行一个明显的滚动，第二个事件将慢慢进入，但无法解决此问题。bufferCount在这里也不好。基本上，问题是车轮事件将导致可观察到的发射约20-50个连续事件在一个突发。因此，我的订阅服务器将执行，但由于订阅服务器中的事件仍在泛滥，将继续被触发。不完全如此。您的订户将获得较少的事件。但在这些事件中，信息更加拥挤。如果您的订阅者确实想要控制他们想要处理的内容和数量，这是很好的。作为提供者，您可以定义他们获得更新的频率。--当接受忽略信息时，请尝试“节流”（throttle）谢谢！我仍在努力思考反应式编程，但你的评论很有帮助。bufferCount在这里也不好。基本上，问题是车轮事件将导致可观察到的发射约20-50个连续事件在一个突发。因此，我的订阅服务器将执行，但由于订阅服务器中的事件仍在泛滥，将继续被触发。不完全如此。您的订户将获得较少的事件。但在这些事件中，信息更加拥挤。如果您的订阅者确实想要控制他们想要处理的内容和数量，这是很好的。作为提供者，您可以定义他们获得更新的频率。--当接受忽略信息时，请尝试“节流”（throttle）谢谢！我仍在努力思考反应式编程，但你的评论很有帮助。