我让用户滚动页面并在每个滚动事件中 - 我正在检查视口
中是否有新项目(如果有,我会对这些新项目进行一些操作 - 暂时无关紧要(。
所以我有这样的东西:
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)....
但我只看到被退回的事件。
问题
如何使用油门并在油门结束时 - 附加去抖?
您可以使用 merge
将两个流合并为一个流:限制和去反弹。演示。
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');
});
由于 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');
}
);