防抖与节流

防抖(debounce):

​ 就是在一定的时间内事件只发生一次,比如你点击button按钮,1秒内任你单身30年手速点击无数次,他也还是只触发一次。

<body>
 <button id="debounce">防抖</button>
 <script>
 window.onload = function () {
  let obtn = document.getElementById('debounce'); //获取按钮
  obtn.addEventListener('click',debounce,false); //监听绑定事件
 }
 //执行函数
 let timer
 function debounce() {
    clearTimeout(timer); //清除缓存
    timer = setTimeout(function(){ 
        console.log('防抖,防抖,防抖');
  },2000)
 }
 </script>
</body>

使用场景:当你在页面中使用onkeyUp监听用户在input框中的输入,如果用户按住一个6不放,那监听事件岂不是一直被触发,这样就浪费了一部分性能了,那么我们在一定事件内监听,也就是说我过了一秒再来看看你输入了多少个6

节流(throttle):

节流就是在一定时间间隔内触发一次事件

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本篇课题,或许早已是烂大街的解读文章。不过春招系列面试下来,不少伙伴们还是似懂非懂地栽倒在(~面试官~)深意的笑容...
    以乐之名阅读 1,796评论 0 9
  • 在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负...
    iqing2012阅读 808评论 0 1
  • 之前实习的时候,我遇到了这么一个需求,搜索框实时发送请求,在做这个功能时我忽略了一个很严重的问题,我把处理请求的函...
    wangmu_mu阅读 455评论 0 1
  • 在日常开发中,我们经常能够碰到以下工作场景: 对提交按钮进行变态的点击压力测试输入框内容的实时校验(譬如验证用户名...
    叫我小徐阅读 1,021评论 0 5
  • 函数防抖(debounce) 假设我们网站有个搜索框,用户输入文本我们会自动联想匹配出一些结果供用户选择。我们可能...
    tobAlier阅读 2,157评论 0 1