我让用户滚动页面并在每个滚动事件中 - 我正在检查视口中是否有新项目
(如果有,我会对这些新项目进行一些操作 - 与现在无关)。
所以我有这样的事情:
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)....
但我只看到了去抖动事件。
问题
如何使用油门并在油门结束时附加去抖动?
答案 0 :(得分:7)
您可以合并两个流:使用merge
将节流和去抖动合并为一个。 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');
});
答案 1 :(得分:1)
这是由于rxjs更改而导致的更新解决方案
import { fromEvent } from 'rxjs';
import { debounceTime, map, throttleTime } from 'rxjs/operators';
const observable = fromEvent(window, 'scroll');
const subscriber = observable
.pipe(
throttleTime(300 /* ms */),
map((data) => {
console.log('throttle');
console.log(window.pageYOffset);
return data;
}),
debounceTime(350)
)
.subscribe(
(x) => {
console.log(window.pageYOffset);
},
(err) => {
console.log('Error: %s', err);
},
() => {
console.log('Completed');
}
);