我让用户滚动页面并在每个滚动事件中 - 我正在检查视口(viewport)中是否有新项目
(如果有,我会对这些新项目进行一些操作 - 现在不相关)。
所以我有这样的东西:
const observable = Rx.Observable.fromEvent(window, 'scroll');
const subscriber = observable.throttleTime(300 /* ms */).subscribe(
(x) => {
console.log('Next: event!');
},
(err) => {
console.log('Error: %s', err);
},
() => {
console.log('Completed');
});
此代码按预期工作,我确实在每 300 毫秒后看到一条消息。
但是有一个问题。用户可能会在未完成 300 毫秒时滚动(不会引发事件),并且在滚动时可以看到一个新项目。
这是我需要 debounce
方法的地方。 (这意味着“在最后一个事件时间的 X 毫秒之后 - 引发一个事件”)
这正是我所需要的。
const subscriber = observable.throttleTime(300 /* ms */).debounceTime(350)....
但我只看到去抖事件。
问题
如何使用 throttle 并在 throttle 结束时附加去抖?
最佳答案
您可以使用 merge
合并两个流:throttled 和 debounced。 Demo .
const observable = Rx.Observable.fromEvent(window, 'scroll');
const subscriber = observable
.throttleTime(300 /* ms */)
.map(() => 'throttle')
.merge(observable
.debounceTime(350)
.map(() => 'debounce')
)
.subscribe(
(x) => {
console.log('Next: event!', x);
},
(err) => {
console.log('Error: %s', err);
},
() => {
console.log('Completed');
});
关于javascript - RxJS - throttle 后的去抖动事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43150017/