防抖和节流

最新推荐文章于 2025-06-06 01:31:59 发布

&小胖&

最新推荐文章于 2025-06-06 01:31:59 发布

阅读量111

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/a2739294436/article/details/121169121

版权

js 专栏收录该内容

5 篇文章

订阅专栏

一、防抖

1.概念：高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)
2.实现防抖

<body>
  <input id="input" type="text">
</body>
<script>
      //获取事件源
  let inp  = document.getElementById('input')
  inp.addEventListener('input',debounce(()=>{
    console.log(1111)
  },1000))
// 封装防抖
  function debounce(fn,time) {
    let timer=null
    return function () {
        clearTimeout(timer)
        timer = setTimeout(()=>{
          fn.call(this,arguments)  // arguments 为传入的参数
        },time)
      }
    }
</script>

二、节流

1.概念：高频率触发的事件,在指定的单位时间内，只响应第一次(前面触发的执行前，忽略后面的事件)

2.实现节流

  <button id="but">节流</button>
</body>
<script>
  let inp = document.getElementById('but')
  inp.addEventListener('click',throttle(()=>{
    console.log(1);
  },1000))
  function throttle(fn,time) {
    let value = 0
    return function () { 
      if(value !==0){
        return 
      }
      value = setTimeout(()=>{
        fn.call(inp)
        value = 0
      },time)
     }
    }
</script>