RxJS 中是否有一个运算符在不延迟"突发中的第一个事件"的情况下进行去抖动,但延迟(并且始终发出("突发中的最后一个事件"?
像这样:
---a----b-c-d-----e-f---
awesome-debounce(2 dashes)
之后变成:
---a----b------d--e----f
而正常的去抖动将是:
-----a---------d-------f
这有点像油门和去抖动的混合体......
,这是我能想到的最简单的解决方案。对您来说有趣的部分是创建子链的awesomeDebounce()
函数。
它基本上只是结合了throttle()
和debounceTime()
运算符:
const Rx = require('rxjs');
const chai = require('chai');
let scheduler = new Rx.TestScheduler((actual, expected) => {
chai.assert.deepEqual(actual, expected);
console.log(actual);
});
function awesomeDebounce(source, timeWindow = 1000, scheduler = Rx.Scheduler.async) {
let shared = source.share();
let notification = shared
.switchMap(val => Rx.Observable.of(val).delay(timeWindow, scheduler))
.publish();
notification.connect();
return shared
.throttle(() => notification)
.merge(shared.debounceTime(timeWindow, scheduler))
.distinctUntilChanged();
}
let sourceMarbles = '---a----b-c-d-----e-f---';
let expectedMarbles = '---a----b------d--e----f';
// Create the test Observable
let observable = scheduler
.createHotObservable(sourceMarbles)
.let(source => awesomeDebounce(source, 30, scheduler));
scheduler.expectObservable(observable).toBe(expectedMarbles);
scheduler.flush();
内部notification
Observable 仅用于throttle()
运算符,因此我可以在需要时手动重置其计时器。我还必须将此可观察性变成"热">,以独立于throttle()
的内部订阅。
在许多情况下,这确实是有用的去抖动类型。使用以下方式使用 merge
、throttleTime
和 debounceTime
:
Rx.Observable.merge(source.throttleTime(1000), source.debounceTime(2000))
完整示例在这里 http://jsbin.com/godocuqiwo/edit?js,console
注意:它不仅会发出去抖间隔中的第一个和最后一个值,还会发出油门产生的值(这通常是预期和需要的,例如滚动去抖动(。