防抖与节流——直击面试痛点！

前端

2023-10-11 09:45:35

前言

作为一名前端开发工程师，在面试中经常会被问到防抖（debounce）和节流(throttle)这两个概念。而事实上，它们也是我们在实际项目开发中会经常遇到的问题。

举个例子，当用户在搜索框中输入文字时，我们通常会发送请求以获取搜索结果。如果用户输入速度很快，就会导致大量的请求发送到服务器，这可能会对服务器造成很大的压力，甚至导致服务器崩溃。

为了解决这个问题，我们可以使用防抖或节流技术来优化请求的发送频率。

防抖

防抖（debounce）是一种技术，它可以限制函数的执行频率。也就是说，当一个函数被多次调用时，它只会在最后一次调用后执行一次。

防抖的实现原理是，每次函数被调用时，都会创建一个定时器。如果在定时器到期之前函数又被调用了，那么就会重新启动定时器。这样，函数就只会在最后一次调用后执行一次。

防抖的应用场景

防抖可以用于各种场景，以下是一些常见的应用场景：

搜索框输入：当用户在搜索框中输入文字时，我们可以使用防抖来限制搜索请求的发送频率，这样可以减轻服务器的压力。
表单提交：当用户提交表单时，我们可以使用防抖来防止用户重复提交表单。
窗口调整：当用户调整窗口大小时，我们可以使用防抖来限制窗口调整事件的触发频率，这样可以提高页面的性能。

防抖的代码示例

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

节流

节流（throttle）是一种技术，它可以限制函数的执行频率。也就是说，当一个函数被多次调用时，它只会在一定的时间间隔内执行一次。

节流的实现原理是，每次函数被调用时，都会创建一个定时器。如果在定时器到期之前函数又被调用了，那么就会忽略这次调用。这样，函数就只会在一定的时间间隔内执行一次。

节流的应用场景

节流可以用于各种场景，以下是一些常见的应用场景：

滚动事件：当用户滚动页面时，我们可以使用节流来限制滚动事件的触发频率，这样可以提高页面的性能。
鼠标移动事件：当用户移动鼠标时，我们可以使用节流来限制鼠标移动事件的触发频率，这样可以提高页面的性能。
视频播放：当视频播放时，我们可以使用节流来限制视频播放事件的触发频率，这样可以提高视频的播放流畅性。

节流的代码示例

function throttle(fn, delay) {
  let lastTime = 0;
  return function () {
    const args = arguments;
    const now = new Date().getTime();
    if (now - lastTime < delay) {
      return;
    }
    lastTime = now;
    fn.apply(this, args);
  };
}