手写防抖节流，攻克面试必备技能

2024-02-01 01:59:34

前言

在前端开发中，我们经常会遇到需要处理用户输入的情况。比如，用户在输入框中输入内容时，我们需要实时更新搜索结果；用户在滚动页面时，我们需要加载更多的内容。为了提高页面性能和用户体验，我们需要对这些操作进行优化。

防抖和节流是两种常用的优化技术。防抖可以防止函数在短时间内被重复调用，而节流可以限制函数在一定时间内只能被调用一次。这两种技术可以有效地减少不必要的函数调用，从而提高页面的性能。

防抖

防抖的原理很简单。当函数被调用时，我们创建一个计时器。如果在计时器到期之前函数又被调用，我们就取消之前的计时器，并重新创建一个新的计时器。这样，函数只能在最后一次调用后的一段时间内被执行一次。

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

这个函数接受两个参数：func是要被防抖的函数，delay是要等待的时间。当func被调用时，函数会创建一个计时器。如果在计时器到期之前func又被调用，函数会取消之前的计时器，并重新创建一个新的计时器。这样，func只能在最后一次调用后的一段时间内被执行一次。

节流

节流的原理与防抖类似。当函数被调用时，我们创建一个计时器。如果在计时器到期之前函数又被调用，我们就忽略这个调用。这样，函数只能在一定时间内被执行一次。

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