手写防抖与节流，你学会了吗？

2024-02-02 16:24:56

前言

欢迎来到「jsliang 求职系列」的第十二期！在这篇文章中，我们将深入探索「防抖」与「节流」这两个重要的前端技术，帮助你更好地理解它们的原理和应用。如果你正在为前端面试做准备，那么一定要认真阅读本文，因为「防抖」和「节流」是前端面试中经常被问到的知识点。

正文

防抖

防抖，顾名思义，就是为了防止某个函数在短时间内被频繁触发。这在实际开发中非常常见，比如监听拖拽滚动条，然后频繁向下滚动信息，会变得很慢，很迟钝。再比如，点击提交表单后，用户在结果还没出来的时候重复触发。简单来说：某件事你并不想它太过频繁触发，那么设置一个定时器，每次进来的时候都清除原本的定时器，重新计算。如果在定时器到期之前又触发了这件事，那就再次清除定时器，重新计算。这样就能保证这件事不会在短时间内被频繁触发。

在代码实现上，防抖可以有两种方式：

setTimeout

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

requestAnimationFrame

function debounce(func, wait) {
  let requestId = null;
  return function() {
    if (requestId) {
      cancelAnimationFrame(requestId);
    }
    requestId = requestAnimationFrame(() => {
      func.apply(this, arguments);
    });
  };
}

节流

节流，顾名思义，就是为了限制某个函数在单位时间内只能被触发一次。这在实际开发中也非常常见，比如限制用户在单位时间内只能发送一次请求，或者限制用户在单位时间内只能点击一次按钮。简单来说：某件事你并不想它在单位时间内被频繁触发，那么设置一个定时器，在定时器到期之前，这件事只能触发一次。

在代码实现上，节流可以有两种方式：

setTimeout

function throttle(func, wait) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, wait);
    }
  };
}

requestAnimationFrame

function throttle(func, wait) {
  let requestId = null;
  return function() {
    if (!requestId) {
      requestId = requestAnimationFrame(() => {
        func.apply(this, arguments);
        requestId = null;
      });
    }
  };
}