import { Operator } from '../Operator'; import { Observable } from '../Observable'; import { Subscriber } from '../Subscriber'; import { Subscription } from '../Subscription'; import { async } from '../scheduler/async'; import { MonoTypeOperatorFunction, SchedulerLike, TeardownLogic } from '../types'; /** * Emits a value from the source Observable only after a particular time span * has passed without another source emission. * * It's like {@link delay}, but passes only the most * recent value from each burst of emissions. * * ![](debounceTime.png) * * `debounceTime` delays values emitted by the source Observable, but drops * previous pending delayed emissions if a new value arrives on the source * Observable. This operator keeps track of the most recent value from the * source Observable, and emits that only when `dueTime` enough time has passed * without any other value appearing on the source Observable. If a new value * appears before `dueTime` silence occurs, the previous value will be dropped * and will not be emitted on the output Observable. * * This is a rate-limiting operator, because it is impossible for more than one * value to be emitted in any time window of duration `dueTime`, but it is also * a delay-like operator since output emissions do not occur at the same time as * they did on the source Observable. Optionally takes a {@link SchedulerLike} for * managing timers. * * ## Example * Emit the most recent click after a burst of clicks * ```ts * import { fromEvent } from 'rxjs'; * import { debounceTime } from 'rxjs/operators'; * * const clicks = fromEvent(document, 'click'); * const result = clicks.pipe(debounceTime(1000)); * result.subscribe(x => console.log(x)); * ``` * * @see {@link auditTime} * @see {@link debounce} * @see {@link delay} * @see {@link sampleTime} * @see {@link throttleTime} * * @param {number} dueTime The timeout duration in milliseconds (or the time * unit determined internally by the optional `scheduler`) for the window of * time required to wait for emission silence before emitting the most recent * source value. * @param {SchedulerLike} [scheduler=async] The {@link SchedulerLike} to use for * managing the timers that handle the timeout for each value. * @return {Observable} An Observable that delays the emissions of the source * Observable by the specified `dueTime`, and may drop some values if they occur * too frequently. * @method debounceTime * @owner Observable */ export function debounceTime(dueTime: number, scheduler: SchedulerLike = async): MonoTypeOperatorFunction { return (source: Observable) => source.lift(new DebounceTimeOperator(dueTime, scheduler)); } class DebounceTimeOperator implements Operator { constructor(private dueTime: number, private scheduler: SchedulerLike) { } call(subscriber: Subscriber, source: any): TeardownLogic { return source.subscribe(new DebounceTimeSubscriber(subscriber, this.dueTime, this.scheduler)); } } /** * We need this JSDoc comment for affecting ESDoc. * @ignore * @extends {Ignored} */ class DebounceTimeSubscriber extends Subscriber { private debouncedSubscription: Subscription = null; private lastValue: T = null; private hasValue: boolean = false; constructor(destination: Subscriber, private dueTime: number, private scheduler: SchedulerLike) { super(destination); } protected _next(value: T) { this.clearDebounce(); this.lastValue = value; this.hasValue = true; this.add(this.debouncedSubscription = this.scheduler.schedule(dispatchNext, this.dueTime, this)); } protected _complete() { this.debouncedNext(); this.destination.complete(); } debouncedNext(): void { this.clearDebounce(); if (this.hasValue) { const { lastValue } = this; // This must be done *before* passing the value // along to the destination because it's possible for // the value to synchronously re-enter this operator // recursively when scheduled with things like // VirtualScheduler/TestScheduler. this.lastValue = null; this.hasValue = false; this.destination.next(lastValue); } } private clearDebounce(): void { const debouncedSubscription = this.debouncedSubscription; if (debouncedSubscription !== null) { this.remove(debouncedSubscription); debouncedSubscription.unsubscribe(); this.debouncedSubscription = null; } } } function dispatchNext(subscriber: DebounceTimeSubscriber) { subscriber.debouncedNext(); }