Christian-health / StudyNote2017

2017年学习笔记
0 stars 0 forks source link

RxJs ------- D #37

Open Christian-health opened 6 years ago

Christian-health commented 6 years ago

Debounce (throttleWithTimeout )

【图片1】 only emit an item from an Observable if a particular timespan has passed without it emitting another item 只有在特定时间段已经过去的情况下才会从Observable发射一个item,而不会发射另一个item

The Debounce operator filters out items emitted by the source Observable that are rapidly followed by another emitted item. 去抖动运算符过滤掉由源Observable发出的项目,紧接着是另一个发射项目。(这个操作符的意思就是说,如果一个Observable一个接着一个紧急的往外发送东西,那么可以通过添加这个操作符进行过滤,防止抖动)

图片【2】 The first variant — called either debounce or throttleWithTimeout — accepts as its parameter a duration, defined as an integer number of milliseconds, and it suppresses any emitted items that are followed by other emitted items during that duration since the first item’s emission. 被称为debounce或throttleWithTimeout的第一个变体接受一个持续时间(定义为毫秒整数),并且抑制从第一个物体的发射开始的持续时间内其他发射物体跟随的任何发射物体。(这个操作符的作用就是过滤掉一段时间之内重复的东西)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript" src="./RxJS-master/dist/rx.all.js"></script>
    <!-- <script type="text/javascript" src="./yang.js"></script> -->
</head>
<body>
<script type="text/javascript">
var times = [
    { value: 0, time: 100 },
    { value: 1, time: 600 },
    { value: 2, time: 400 },
    { value: 3, time: 700 },
    { value: 4, time: 200 }
];

// Delay each item by time and project value;
var source = Rx.Observable.from(times)
  .flatMap(function (item) {
    return Rx.Observable
      .of(item.value)
      .delay(item.time)
      .map(res => {console.log('res',res);return res;}
     );
  })
  .debounce(500 /* ms */);

var subscription = source.subscribe(
  function (x) {
    console.log('Next: %s', x);
  },
  function (err) {
    console.log('Error: %s', err);
  },
  function () {
    console.log('Completed');
  });
</script>
</body>
</html>

程序的运行结果:
map中的console.log输出
res 0
res 4
res 2
res 1
res 3
subscribe订阅中获得的东西:
Next: 3
Completed

【图3】

debounceWithSelector

The debounceWithSelector operator throttles the source Observable by applying a function to each item it emits, this function generating an Observable. If the source Observable emits another item before this newly-generated Observable terminates, debounce will suppress the item. debounceWithSelector运算符通过对其发出的每个项目应用一个函数来调节源Observable,该函数生成一个Observable。 如果源Observable在这个新生成的Observable终止之前发出另一个项目,则去抖动将会抑制该项目。