函数防抖与函数节流：处理高频事件的利器

前端

2024-02-12 14:49:15

函数防抖和函数节流：处理高频事件的得力助手

在现代前端开发中，处理高频事件是一个常见的挑战。想象一下按钮的频繁点击、窗口的不断拖拽等场景，这些事件可能会导致大量的函数调用，从而对性能产生负面影响。

为了解决这一问题，函数防抖和函数节流应运而生，成为处理高频事件的得力助手。

函数防抖

定义：

函数防抖是一种技术，它规定某个函数只在一段时间内执行一次。

工作原理：

函数防抖使用一个定时器来控制函数的执行。当函数第一次被触发时，定时器开始计时。如果在计时器结束之前函数再次被触发，计时器将被重置，重新开始计时。只有当计时器结束时，函数才会真正执行。

应用场景：

输入框的搜索建议
表单的验证
窗口大小的改变

代码示例：

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

函数节流

定义：

函数节流是一种技术，它规定某个函数在一定时间间隔内只能执行一次。

工作原理：

函数节流与函数防抖类似，也使用定时器。不过，函数节流的定时器是在函数执行后开始计时的。只有当定时器结束时，函数才能再次执行。

应用场景：

窗口的滚动
鼠标的移动
动画的执行

代码示例：

function throttle(func, delay) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

函数防抖与函数节流的区别

虽然函数防抖和函数节流都是处理高频事件的技术，但它们在工作原理和应用场景上有所不同：

特征	函数防抖	函数节流
执行时机	最后一次触发后	一定时间间隔后
触发次数	只执行一次	执行多次
应用场景	输入框搜索建议、表单验证	窗口滚动、鼠标移动