_.throttle使用RXJS observables实现
我是Rxjs Observables的新手,我需要使用Rxjs实现节流。_.throttle使用RXJS observables实现
在下划线我们这样做有以下行 -
_.throttle(functionName, timespan, {trailing : true/false}).
请协助如何做到这一点与观测。
只需使用throttle
操作。
Rx.Observable.fromEvent(window, 'mousemove')
.throttle(500)
.subscribe(x => console.log(x));
它会调节事件,使得在单个500毫秒窗口内只能发生一个事件。
看看sample运营商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>
如果要实现使用油门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>
赞赏。但是有没有像fromEvent那样的方法将另一个方法作为输入并使用其他方法对其进行节制让我们说样本? –
@PushkarKathuria我真的没有得到你想要的东西,但我编辑了我的答案,以便你可以看到来自带RxJs的下划线实现的油门模拟。如果有点击,它每秒都会触发功能。 – sielakos
它仅适用于事件吗?如果听起来很愚蠢,道歉。但是我需要执行的任务是调节一个函数调用。同样的事情,这下面的行: _.throttle(函数,时间跨度,{追踪:真/假}) 上面的行将油门函数为特定的时间跨度和后来调用它。 我希望我能够澄清这个问题? –
赞赏。只是想澄清。 Rx.Observables.fromEvent将侦听事件(如mousemove在这里)。如果我不想听一个事件,我只想扼杀一个功能?我希望我的问题是有效的。如果不善意协助。就像我说的我想模仿以下功能的行为。 _.throttle(functionName,timespan,{trailing:true/false}) –
您可以将解决方案作为所提供的其他答案进行破解,但并不是真正的“Rx”解决方案。我的问题是为什么它必须是一个功能?什么是调用该功能?通常与Rx的想法是从源头开始,围绕整个任务构建管道。 – paulpdaniels