妙解节流防抖，轻松攻破复杂场景难题

前端

2023-12-20 03:56:10

节流与防抖：优化函数执行频率的利器

简介

在计算机科学中，节流和防抖技术被广泛应用于事件处理，以控制函数的执行频率，防止其在短时间内重复触发。这两项技术对于提高系统性能、减少服务器负载和优化用户体验至关重要。

节流

原理

节流技术基于设置一个计时器。在计时器启动期间，函数只能执行一次。如果在计时器运行期间再次触发函数，计时器将被重置，重新开始计时。这样就保证了函数在指定时间间隔内只执行一次。

代码示例

// 节流函数
const throttle = (func, wait) => {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, wait);
    }
  };
};

应用场景

搜索框输入：限制搜索请求的频率，避免服务器过载。
页面滚动：控制加载更多数据的频率，优化滚动体验。
窗口大小改变：防止频繁重新渲染页面，减少闪烁。

防抖

原理

防抖技术的目的是让函数在指定时间段内只执行一次，而不管在此期间函数被触发多少次。只要在时间段内未再次触发函数，函数就会执行。如果在此期间触发了函数，计时器将重新启动，直到时间段结束才会执行函数。

代码示例

// 防抖函数
const debounce = (func, wait) => {
  let timer = null;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
      timer = null;
    }, wait);
  };
};

应用场景

鼠标移动：限制鼠标移动事件处理器的调用频率。
表单验证：防止重复提交表单，确保数据完整性。
定时器：防止计时器在短时间内多次触发，提高准确性。

两者比较

节流和防抖技术都有其独特的应用场景，如下所示：

技术	原理	应用场景
节流	在一定时间间隔内只允许函数执行一次	防止重复触发，降低服务器负载
防抖	在指定时间段内只执行一次函数	等待用户输入完成或稳定状态，优化体验