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

2019-05-13 18:45:32 浏览数 (2)

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

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

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

代码语言:javascript复制
    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 例子

代码语言:javascript复制
<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>

0 人点赞