防抖与节流

最新推荐文章于 2025-05-10 22:30:50 发布

聆听-前端发开

最新推荐文章于 2025-05-10 22:30:50 发布

阅读量102

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_43600643/article/details/129393148

版权

javascript 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了JavaScript中两种优化频繁触发事件处理的技巧——防抖和节流。防抖技术在用户停止输入后（如搜索框搜索）才执行最后一次操作，而节流则确保单位时间内只执行一次，适用于鼠标滑动、resize和scroll事件等高频场景。文中提供了防抖和节流的实现示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 防抖：单位时间内，频繁触发事件，只执行最后一次

典型场景：搜索框搜索输入，只需用户最后一次输入完，再发送请求

手机号、邮箱验证输入检测。窗口大小`resize`。只需窗口调整完成后，计算窗口大小。防止重复渲染。

代码思路是：利用定时器，每次触发先清掉以前的定时器（从新开始）

2. 节流：单位时间内，频繁触发事件，只执行一次

典型场景：高频事件，快速点击、鼠标滑动、resize 事件、scroll 事件代码思路也是利用定时器，

代码思路是：等定时器执行完毕，才开启定时器（不要打断）

// 防抖
<input type="text">
  <script>
    function debounce(fn,delay){
      let timer=null
      // 返回一个函数，因为onkeyup=的值得为函数
      return ()=>{
        if(timer){
          clearTimeout(timer) // 清除定时器
        }
        timer=setTimeout(()=>{
          fn()
        },delay)
      }
    }
    let ipt=document.querySelector('input')
    ipt.onkeyup=debounce(()=>console.log(ipt.value),1000)
  </script>

// 节流
<input type="text">
  <script>
    const input = document.querySelector('input');
    function throttle(fn,delay){
      let timer=null
      return ()=>{
        if(timer){
          return
        }
        timer=setTimeout(()=>{
          fn()
          timer=null
          // clearTimeout(timer) 写不写一样
        },delay)
      }
    }
    input.onkeyup = throttle(() => {
            console.log(input.value);
    }, 500)
  </script>