[RxJS] Transformation operators: debounce and debounceTime

最新推荐文章于 2025-09-08 00:09:35 发布

转载最新推荐文章于 2025-09-08 00:09:35 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/5543751.html

文章标签：

#ui

本文详细介绍了RxJS中Debounce和debounceTime操作符的使用方法及其应用场景，特别是对于实现输入框自动补全等交互界面非常有用。通过具体示例展示了如何根据不同时间间隔过滤连续的事件触发。

Debounce and debounceTime operators are similar to delayWhen and delay, with the difference that they may drop some emissions. This lesson teaches you how debounce works and where is it useful, for instance when building a type-ahead UI.

debounceTime(number): wait for number millionseconds sclience:

var foo = Rx.Observable.interval(100).take(5);

/*
--0--1--2--3--4|
  debounceTime(1000) // delay
------------------------4|
*/

var result = foo.debounceTime(1000);

result.subscribe(
  function (x) { console.log('next ' + x); },
  function (err) { console.log('error ' + err); },
  function () { console.log('done'); },
);

  /*
"next 4"
"done"  
  */

var foo = Rx.Observable.interval(100).take(5);

/*
--0--1--2--3--4|
  debounceTime(50) // delay
----0--1--2--3--4|
*/

var result = foo.debounceTime(50);

result.subscribe(
  function (x) { console.log('next ' + x); },
  function (err) { console.log('error ' + err); },
  function () { console.log('done'); },
);

  /*
"next 0"
"next 1"
"next 2"
"next 3"
"next 4"
"done" 
  */

debounce( () => Observable):

var foo = Rx.Observable.interval(100).take(5);

/*
--0--1--2--3--4|
  debounceTime(1000) // delay
------------------------4|
*/

var result = foo.debounce(() =>
  Rx.Observable.interval(1000).take(1)
);

result.subscribe(
  function (x) { console.log('next ' + x); },
  function (err) { console.log('error ' + err); },
  function () { console.log('done'); },
);

  /*
"next 4"
"done"  
  */