#防抖节流-优快云博客

本文链接：https://blog.youkuaiyun.com/Ellison_d/article/details/118095903

防抖和节流是两种常见的性能优化策略。防抖技术常用于输入框场景，确保用户停止输入一段时间后才执行接口请求，减少不必要的计算。节流则适用于滚动事件或按钮点击，保证在指定间隔内只执行一次任务，例如限制用户快速点击按钮的次数。本文通过示例代码展示了防抖和节流的实现方式及其在实际场景中的应用。

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

防抖节流

防抖

防抖(debounce)就是在任务频繁触发下，为了优化性能，只有在任务触发的时间超过指定的间隔时间的时候，任务才会执行，只要不是最后一次触发就不会执行异步请求

应用场景：如输入框，频繁请求时，

输入框：输入之后会调用接口，获取关联词。但是因为频烦调用接口会导致性能降低，所以我们在代码中使用防抖功能，只有在用户输入完毕的一段时间后，才会调用接口，出现关联词

var timer;
window.onscroll = function() {
  // 如果当前的timer不是空，说明前面有一个等待的数据请求，还未发送
  if(timer !== undefined) {
  	clearTimeout(timer);
  }
  timer = setTimeout(() => {
    console.log('发送请求，加载更多数据')
  },1000)
}

节流

节流(throttle)就是在指定的间隔时间内只会执行一次任务，第一次发送请求后，只要响应没有回来就不会触发第二次

应用场景：

懒加载要监听计算滚动条的位置，使用节流按一定时间的频率获取
用户点击提交按钮，假设我们知道接口大致的返回时间的情况下，我们使用节流，只允许一定时间内点击一次

# html代码
<button id="btn" style="position:fixed ;right: 0;bottom: 500px;">点我节流</button>
#script代码
//开关变量
var canClick = true;
btn.onClick = function() {
  if(canClcik) {
    if(canClick){
      canClick=false;//先关闭开关
      // 在发送请求
      console.log("发送请求");
      setTimeout(function(){
        console.log("节流成功");
        // 在请求的回调函数结尾，重新打开开关，允许下次单击
        canClick=true;
      },2000);
      }
  }
}