RxJS 学习系列 10. 过滤操作符 debounce，debounceTime，throttle，throttleTime

mafeifan

发布于 2019-05-13 18:45:32

2.3K0

发布于 2019-05-13 18:45:32

文章被收录于专栏：finleyMafinleyMa

debounce: 接收一个返回Observable的方法，可以传入interval，timer等 debounce会根舍弃掉在两次输出之间小于指定时间的发出值。 debounceTime: 接收毫秒数，舍弃掉在两次输出之间小于指定时间的发出值。适用场景：搜索栏输入关键词请求后台拿数据，防止频繁发请求。 debounceTime 比 debounce 使用更频繁

throttle 节流：接收一个返回Observable的方法，可以传入interval，timer等 throttleTime：接收毫秒数，经过指定的这个时间后发出最新值。

debounce 和 throttle 他們两个的作用都是要降低事件的触发頻率，但行为上有很大的不同。throttle 比较像是控制行为的最高頻率，也就是说如果我们设定 1000 毫秒，那该事件频率的最大值就是每秒触发一次不会再更快，debounce 则比较像要等到一定的时间过了才会收到元素。

    const { interval, timer } = rxjs;
    const { debounce } = rxjs.operators;

    // 每1秒发出值, 示例: 0...1...2
    const interval$ = interval(1000);
    // 每1秒都将 debounce 的时间增加200毫秒
    const debouncedInterval = interval$.pipe(debounce(val => timer(val * 200)));
    /*
      5秒后，debounce 的时间会大于 interval 的时间，之后所有的值都将被丢弃
      输出: 0...1...2...3...4......(debounce 的时间大于1秒后则不再发出值)
    */
    const subscribe = debouncedInterval.subscribe(val =>
        console.log(`Example Two: ${val}`)
    );

debounceTime 例子

<body>
    <input type="text" id="example">
</body>
<script src='../lib/rxjs6.3.3.umd.js'></script>
<script>
    // https://rxjs-cn.github.io/learn-rxjs-operators/operators/filtering/debouncetime.html
    // debounceTime
    // 舍弃掉在两次输出之间小于指定时间的发出值
    // 此操作符在诸如预先知道用户的输入频率的场景下很受欢迎！

    const { fromEvent, timer } = rxjs;
    const { debounceTime, map } = rxjs.operators;

    const input = document.getElementById('example');

    // 对于每次键盘敲击，都将映射成当前输入值
    const example = fromEvent(input, 'keyup').pipe(map(i => i.currentTarget.value));

    // 在两次键盘敲击之间等待0.5秒方才发出当前值，
    // 并丢弃这0.5秒内的所有其他值
    const debouncedInput = example.pipe(debounceTime(500));

    // 输出值
    const subscribe = debouncedInput.subscribe(val => {
        console.log(`Debounced Input: ${val}`);
    });

</script>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.04.29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

observable