debounce
函数签名: debounce(durationSelector: function): Observable
debounce: 接收一个返回Observable的方法，可以传入interval，timer等。
根据一个选择器函数，舍弃掉在两次输出之间小于指定时间的发出值。
示例 1: 基于 timer 的 debounce
// RxJS v6+
import { of, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
// 发出四个字符串
const example = of('WAIT', 'ONE', 'SECOND', 'Last will display');
/*
只有在最后一次发送后再经过一秒钟，才会发出值，并抛弃在此之前的所有其他值
*/
const debouncedExample = example.pipe(debounce(() => timer(1000)));
/*
在这个示例中，所有的值都将被忽略，除了最后一个
输出: 'Last will display'
*/
const subscribe = debouncedExample.subscribe(val => console.log(val));
示例 2: 基于 interval 的 dobounce
// RxJS v6+
import { interval, timer } from 'rxjs';
import { debounce } from '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
函数签名: debounceTime(dueTime: number, scheduler: Scheduler): Observable
debounceTime: 接收毫秒数，舍弃掉在两次输出之间小于指定时间的发出值。
舍弃掉在两次输出之间小于指定时间的发出值。
适用场景：搜索栏输入关键词请求后台拿数据，防止频繁发请求。
debounceTime 比 debounce 使用更频繁
示例 1: 基于输入间隔时间的 debounce
// RxJS v6+
import { fromEvent, timer } from 'rxjs';
import { debounceTime, map } from '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}`);
});
throttle
函数签名:throttle(durationSelector: function(value): Observable | Promise): Observable
接收一个返回Observable的方法，可以传入interval，timer等。
throttle 预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。
以某个时间间隔为阈值，在 durationSelector 完成前将抑制新值的发出
示例 1: 节流2秒，时间由第2个 observable 决定
// RxJS v6+
import { interval } from 'rxjs';
import { throttle } from 'rxjs/operators';
// 每1秒发出值
const source = interval(1000);
// 节流2秒后才发出最新值
const example = source.pipe(throttle(val => interval(2000)));
// 输出: 0...3...6...9
const subscribe = example.subscribe(val => console.log(val));
示例 2: 使用 promise 进行节流
// RxJS v6+
import { interval } from 'rxjs';
import { throttle, map } from 'rxjs/operators';
// 每1秒发出值
const source = interval(1000);
// 基于 source 自增地增加解析的时间
const promise = val =>
new Promise(resolve =>
setTimeout(() => resolve(`Resolved: ${val}`), val * 100)
);
// 当 promise 解析时发出 source 的项
const example = source.pipe(
throttle(promise),
map(val => `Throttled off Promise: ${val}`)
);
const subscribe = example.subscribe(val => console.log(val));
throttleTime
函数签名:throttleTime(duration: number, scheduler: Scheduler): Observable
throttleTime： 接收毫秒数，经过指定的这个时间后发出最新值。
throttleTime操作符所做的操作是，在一定时间范围内不管产生了多少事件，它只放第一个过去，剩下的都将舍弃。
当指定的持续时间经过后发出最新值。
示例 1: 每5秒接收最新值
// RxJS v6+
import { interval } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
// 每1秒发出值
const source = interval(1000);
/*
节流5秒
节流结束前发出的最后一个值将从源 observable 中发出
*/
const example = source.pipe(throttleTime(5000));
// 输出: 0...6...12
const subscribe = example.subscribe(val => console.log(val));
示例 2: 对合并的 observable 节流
// RxJS v6+
import { interval, merge } from 'rxjs';
import { throttleTime, ignoreElements } from 'rxjs/operators';
const source = merge(
// 每0.75秒发出值
interval(750),
// 每1秒发出值
interval(1000)
);
// 在发出值的中间进行节流
const example = source.pipe(throttleTime(1200));
// 输出: 0...1...4...4...8...7
const subscribe = example.subscribe(val => console.log(val));