Реализация _.throttle с использованием наблюдаемых значений RXJS

Question

Я новичок в Rxjs Observables, и мне нужно реализовать дросселирование с использованием Rxjs.

В подчеркивании мы делаем это с помощью следующей строки -

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

Просьбы помочь, как сделать это с наблюдаемыми.

Answer 1

Просто используйте оператор throttle.

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

Он будет дросселировать события так, чтобы в течение одного 500 миллисекундного окна могло проходить только одно событие.

Answer 2

Посмотрите на sample оператора в RxJs

Вот простой пример с 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>

Если вы хотите реализовать дроссельных с помощью RxJS вы можете сделать это так:

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));

<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>