聊聊 JS 防抖和节流，为面试增加砝码

前端

2023-12-20 05:38:02

摘要： 防抖和节流是 JavaScript 中常用的函数优化技术，理解它们的基础概念和应用场景至关重要。本文将深入剖析防抖和节流的精髓，助你快速掌握这两项技能，为你的面试锦上添花。

引言

在前端开发中，处理高频事件时，我们经常需要对函数进行优化，以避免性能问题和不必要的资源浪费。防抖和节流是两种常用的函数优化技术，它们可以有效地解决高频事件带来的困扰。

防抖

防抖（Debounce）是一种函数优化技术，它可以延迟函数的执行，直到事件停止触发一段时间后才执行。这意味着，如果事件在短时间内重复触发，函数只会在最后一次触发后执行一次。

应用场景：

输入框输入时触发搜索
窗口大小调整时触发布局重排
鼠标悬停时触发显示提示框

代码示例：

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

节流

节流（Throttle）是一种函数优化技术，它可以限制函数在一定时间内只执行一次。这意味着，即使事件在短时间内重复触发，函数也只会按照设定的时间间隔执行。

应用场景：

滚动时触发页面加载更多
鼠标移动时触发位置更新
动画帧循环中需要控制更新频率

代码示例：

function throttle(func, delay) {
  let lastExec = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastExec > delay) {
      func.apply(this, args);
      lastExec = now;
    }
  };
}

对比

防抖和节流都是函数优化技术，但它们的工作方式和应用场景不同：