美文网首页
debounceTime 和 throttleTime 的弹珠图

debounceTime 和 throttleTime 的弹珠图

作者: _扫地僧_ | 来源:发表于2022-01-16 13:24 被阅读0次

    debounceTime:测试代码

    import {
      concat,
      debounceTime,
      filter,
      interval,
      mapTo,
      of,
      take,
      throttleTime,
    } from 'rxjs';
    
    const a = of(1);
    const b = of(2);
    
    const c = concat(a, b);
    
    c.subscribe((data) => console.log(data));
    
    const a1$ = interval(500).pipe(take(2), mapTo('A'));
    const a2$ = interval(1000).pipe(take(3), mapTo('B'));
    const a3$ = interval(500).pipe(take(3), mapTo('C'));
    const source$ = concat(a1$, a2$, a3$);
    
    const result$ = source$.pipe(debounceTime(800));
    
    result$.subscribe((data) => console.log(data));
    
    

    最后输出:A B B C

    弹珠图:


    第一阶段的两个 A,只有后者才能进入下游,因为第二个 A 和第二阶段的第一个 B,间隔时间大于 800 毫秒。

    第二阶段的前两个 B 能够进入下游,而最后一个 B 不行,∵最后一个 B 和第三阶段的第一个 C 时间间隔小于 800 毫秒。

    上游完结时,生成的最后一个元素,总是能进入下游。

    如果改成 throttleTime,输出的序列为:A B B B C

    弹珠图:


    第二个 A 和 第一个 A 的时间间隔小于 800 毫秒,故不能进入下游。三个 B 的生成间隔全部大于 800 毫秒,故全部进入下游。第二个 C 生成时,距离最后一个 B 的生成已经过去了 1秒钟,时间间隔大于 800 毫秒,故第二个 C 进入下游。

    更多Jerry的原创文章,尽在:"汪子熙":


    相关文章

      网友评论

          本文标题:debounceTime 和 throttleTime 的弹珠图

          本文链接:https://www.haomeiwen.com/subject/wftkcrtx.html