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 里面的内容。

     

  • 相关阅读:
    【贴吧】计算器代码注释
    简单理解面向对象思维
    [转载]编程哲理
    Android SDK Manager无法更新的解决方案
    CSS选择器
    javascript arguments参数问题
    html垂直居中
    x64系统WSC注册方法
    SharePoint Server 2013安装
    Asp Url汉字乱码的问题
  • 原文地址:https://www.cnblogs.com/wyjblog/p/15576486.html
Copyright © 2011-2022 走看看