• debounceTime
    • 签名: debounceTime(dueTime: number, scheduler: Scheduler): Observable
  • 舍弃掉在两次输出之间小于指定时间的发出值
    • 示例
      • 示例 1: 基于输入间隔时间的 debounce
  • 其他资源

    debounceTime

    签名: debounceTime(dueTime: number, scheduler: Scheduler): Observable

    舍弃掉在两次输出之间小于指定时间的发出值


    :bulb: 此操作符在诸如预先知道用户的输入频率的场景下很受欢迎!


    示例

    示例 1: 基于输入间隔时间的 debounce

    ( jsBin |
    jsFiddle )

    1. import { fromEvent } from 'rxjs/observable/fromEvent';
    2. import { timer } from 'rxjs/observable/timer';
    3. import { debounceTime, map } from 'rxjs/operators';
    4. const input = document.getElementById('example');
    5. // 对于每次键盘敲击,都将映射成当前输入值
    6. const example = fromEvent(input, 'keyup').pipe(map(i => i.currentTarget.value));
    7. // 在两次键盘敲击之间等待0.5秒方才发出当前值,
    8. // 并丢弃这0.5秒内的所有其他值
    9. const debouncedInput = example.pipe(debounceTime(500));
    10. // 输出值
    11. const subscribe = debouncedInput.subscribe(val => {
    12. console.log(`Debounced Input: ${val}`);
    13. });

    其他资源

    • debounceTime :newspaper: - 官方文档
    • 转换操作符: debounce 和 debounceTime :video_camera: :dollar: - André Staltz

    :file_folder: 源码: https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/debounceTime.ts