zoukankan      html  css  js  c++  java
  • RxjsdebounceTime

     debounceTime(20) 

    图解:
    Observable 先发送出来 a ,可以订阅得到。
    Observable 后面开始发送 b ,发送完 b ,被 debounceTime 延迟订阅(可以理解成拦截),等待 20ms,看看有没有其他数据被发送出来,如果没有,b 也可以被订阅,如果有,则用新数据代替 b ,新数据继续被 debounceTime  延迟订阅,等待20ms,看看再有没有新数据被发送出来。
    如图,a 被发送出来,经过 20ms 没有等到其他新数据,a 被成功订阅,继续发送 b ,结果 b 发出来不到20ms,又发出来了 c,b被完全拦截取消了,再过 20ms,没有其他数据,c被成功订阅,继续发送d,d后面没有其他数据了,可以被订阅。
    示例:
     1     count=0;   
     2 
     3     const box=document.getElementById('box');
     4     // 注册点击事件
     5     fromEvent(box,'click').pipe(
     6       debounceTime(1000)  // 设置拦截时间为 1s
     7     ).subscribe(e=>{
     8       this.count+=1;  // 每次点击,count加1
     9       console.log(`点击${this.count}次`);
    10       console.log(e);
    11     })

    在上述代码中,获取 dom 元素 box,点击 box,在控制台输出点击 次数 及 点击事件对象。设置拦截为 1s

    当点击的时候,每次点击时间间隔在1s以内,则点击效果和只点击一次效果一样,如果点击时间间隔大于1s,每次点击,都会执行  subscribe 里面的内容。

     

  • 相关阅读:
    SQL随记(四)
    一些有用的方法命令
    导航目录
    HTML中       等6种空白空格的区别
    MyBatis学习资料
    Spring Cloud资料
    聚类算法对比
    Spark 读取HBase数据
    ZooKeeper设置ACL权限控制
    大数据工具选择
  • 原文地址:https://www.cnblogs.com/wyjblog/p/15576486.html
Copyright © 2011-2022 走看看