javascript RxJS.Observable 去抖动有什么作用?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30840247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 12:46:25  来源:igfitidea点击:

What does RxJS.Observable debounce do?

javascriptrxjsdebouncing

提问by Adrian

Can anybody explain in plain English what RxJS Observable debounce functiondoes?

谁能用简单的英语解释一下RxJS Observable 去抖动函数的作用?

I imagine it emits an event once in a while depending on the parameters, but my code below doesn't work as I expected.

我想它会根据参数偶尔发出一个事件,但我下面的代码没有按预期工作。

var x$ = Rx.Observable.fromEvent(window, 'click')
    .map(function(e) {return {x:e.x, y:e.y};})
    .debounce(1000)
    .subscribe(function(el) {
      console.log(el);
    });

and the JsBin version.

JsBin 版本

I expected that this code would print one click once per second, no matter how fast I am clicking. Instead it prints the click at what I think are random intervals.

我预计无论我点击多快,这段代码都会每秒打印一次点击。相反,它以我认为是随机的间隔打印点击。

回答by Eric Broda

Debounce will emit a value after a specified time interval has passed without another value being emitted.

Debounce 将在指定的时间间隔过去后发出一个值,而没有发出另一个值。

Using simple diagrams the following may provide greater help:

使用简单的图表,以下内容可能会提供更大的帮助:

Stream 1 | ---1-------2-3-4-5---------6----

    after debounce, the emitted stream looks like as follows:

Stream 2 | ------1-------------5---------6-

The intermediate items (in this case, 2,3,4) are ignored.

中间项(在本例中为 2,3,4)被忽略。

An example is illustrated below:

一个例子如下图所示:

var Rx = require('rx-node');
var source = Rx.fromStream(process.stdin).debounce(500);
var subscription = source.subscribe(
    function (x) {
        console.log('Next: %s', x);
    }
);

I used node to illustrate this... assuming you have node installed, you can run it by typing

我用 node 来说明这一点......假设你已经安装了 node,你可以通过键入来运行它

$node myfile.js  (where the aforementioned code is in myfile.js)

Once this node program is started you can type values at the console -- if you type quickly items are ignored, and if type intermittently fast and slow items will appear after a gap in typing (in the example above I have 500ms) at the console ("Next: ")

一旦这个节点程序启动,你就可以在控制台输入值——如果你快速输入项目将被忽略,如果在控制台输入间隔(在上面的例子中我有 500 毫秒)后间歇性地输入快和慢项目将出现(“下一个: ”)

There is also some excellent reference material at https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md也有一些优秀的参考资料

回答by Riccardo Galli

Long story short: debounce waits for X time that the stream isn't emitting any new value, then let the latest value pass.

长话短说: debounce 等待 X 时间流不发出任何新值,然后让最新值通过。

Long story: Once a value is emitted, debounce will pause its emission for X time to see if another value is emitted, in fact blocking the stream during this time. If a new value is emitted during the debounce time then the timer is restarted and debounce waits again for the full time. If its timer expires without any new value being emitted, it let the latest value pass.

长话短说:一旦发出一个值,去抖动将暂停它的发射 X 时间,以查看是否发出另一个值,实际上在此期间阻塞了流。如果在去抖时间期间发出新值,则定时器重新启动,去抖再次等待整个时间。如果它的计时器到期而没有发出任何新值,它就会让最新的值通过。

Let's say that you want to add autocomplete to an input box. If the user insert "a" you may want to show him the choices "acorn, alaska", but if the user right after press "l" you would propose just "alaska". In this case it's better to wait for the user to stop pressing the keyboards to avoid doing unnecessary work. debounce it's the right tool here: it waits for X time the the stream isn't emitting any new value

假设您想向输入框添加自动完成功能。如果用户插入“a”,您可能希望向他展示选项“acorn, alaska”,但如果用户在按下“l”后立即建议“alaska”。在这种情况下,最好等待用户停止按下键盘以避免做不必要的工作。去抖动它是这里的正确工具:它等待 X 次流没有发出任何新值

回答by zerkms

.debounce()produces the last received value if no values were received within the specified interval.

.debounce()如果在指定的时间间隔内没有接收到任何值,则生成最后接收到的值。

It means that as soon as you click within a second - nothing will be produced.

这意味着只要您在一秒钟内单击 - 将不会产生任何内容。

If you want to throttle values to be emitted no more frequent than every second you need to use .sample(1000)instead.

如果你想限制值的发射频率不超过每秒,你需要使用它.sample(1000)