防抖节流的例子

最新推荐文章于 2025-01-08 16:56:09 发布

原创最新推荐文章于 2025-01-08 16:56:09 发布 · 179 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被收录于：

37 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了JavaScript中事件防抖和节流的概念与应用。通过示例展示了如何实现输入框keyup事件的防抖处理，以优化模糊搜索性能，以及按钮点击事件的节流处理，以限制执行频率。这两个技术对于提升网页性能和用户体验至关重要。

防抖：在事件触发后N秒内只执行一次，如果出发了重新计算执行时间。例如模糊搜索的keyup事件运用

<body>
  <div><input id="name" value=""/></div>
</body>
<script>
  let name = document.getElementsByTagName('input')
  let keEvent = document.addEventListener('keyup',function(e){
    eventDebonce(e.target.value)
  });

  function debounce (delay,callback){
    let timer;
    return function(value){
      clearTimeout(timer)
      timer = setTimeout(function(){
        callback(value)  
       
      },delay)
    }
  }
  let eventDebonce = debounce(1000,fn)
   function fn(value){
    console.log(value)
   }

</script>

节流：连续触发事件，N秒内只执行一次

<body>
    <div><button id = 'bttton'>点击</button></div>
</body>
<script>

  document.getElementById('bttton').onclick = throttle(2000,fc)

  function throttle(delay,fc){
    console.log('ui')

    let timeOut
    return function(){
      if(!timeOut){
        timeOut = setTimeout(function(){
          fc();
          timeOut = null
        },delay)
      }
      
    }
  }
  
  function fc(){
    console.log(Math.random())
  }

标签

#javascript #前端 #开发语言