_.使用RXJS可观测数据实现节流

Question

我是Rxjs可观测对象的新手，我需要使用Rxjs实现节流。

在下划线中，我们使用下面的行来实现这一点-

_.throttle(functionName, timespan, {trailing : true/false}).

请协助如何使用可观察到的数据。

Answer 1

看看RxJs中的示例操作符

下面是一个关于div上的mousemove事件的简单示例。

const source = document.getElementById('source');

Rx.Observable
  .fromEvent(source, 'mousemove')
  .sample(1000)
  .map(event => ({x: event.offsetX, y: event.offsetY}))
  .subscribe(console.log);

#source {
  width: 400px;
  height: 400px;
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>

<div id="source"></div>

Answer 2

只需使用节流运算符。

Rx.Observable.fromEvent(window, 'mousemove')
  .throttle(500)
  .subscribe(x => console.log(x));

它将限制事件，以便在一个500毫秒窗口内只能通过一个事件。