Question

我是Rxjs Observables的新手，我需要使用Rxjs实现限制。

在下划线中，我们使用以下行 -

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

请用可观察的方式协助如何做到这一点。

Answer 1

在RxJs中查看sample运算符

以下是div上的mousemove事件的简单示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果你想使用RxJS实现节流，你可以这样做：

＆＃13;

function throttle(fn, delay) {
  const subject = new Rx.Subject();
  
  subject
    .sample(delay)
    .subscribe(args => fn(...args));
  
  return (...args) => subject.onNext(args);
}

const sourceBtn = document.getElementById('source');
const countSpan = document.getElementById('count');
let count = 0;

sourceBtn.addEventListener('click', throttle(() => {
  count++;
                                             
  countSpan.innerHTML = count;
}, 1000));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>

<button id="source" type="button">click</button> <br>
count = <span id="count"></span>

＆＃13;

Answer 2

只需使用throttle运算符。

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

它将限制事件，使得在单个500毫秒窗口期间只能发生一个事件。

使用RXJS observables进行_.throttle实现

2 个答案: