揭秘女朋友也懂的防抖与节流

前端

2023-10-22 11:17:55

前言

在日常开发或面试中，防抖与节流应该是属于高频出现的点。它们都是前端开发中常用的性能优化技巧，可以有效减少不必要的函数调用，提高代码执行效率。

防抖

防抖（debounce）是指在一段时间内，只触发一次函数。如果在规定时间内函数被多次调用，那么只有最后一次调用会被执行。

原理及实现

防抖的原理很简单，就是利用一个计时器来控制函数的执行。当函数被调用时，先启动一个计时器。如果在计时器到期之前函数又被调用，那么就重新启动计时器。这样，函数就只能被执行一次。

以下是防抖函数的实现代码：

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

应用场景

防抖常用于以下场景：

输入框输入事件：在用户输入时，防抖可以避免频繁触发搜索请求，从而提高性能。
滚动事件：在用户滚动页面时，防抖可以避免频繁触发加载更多数据的请求，从而提高性能。
窗口大小改变事件：在用户调整窗口大小时，防抖可以避免频繁触发重新布局的事件，从而提高性能。

节流

节流（throttle）是指在一段时间内，只允许函数被执行一次。如果在规定时间内函数被多次调用，那么只有第一次调用会被执行。

原理及实现

节流的原理与防抖相似，也是利用一个计时器来控制函数的执行。当函数被调用时，先启动一个计时器。如果在计时器到期之前函数又被调用，那么计时器会被重置。这样，函数就只能被执行一次。

以下是节流函数的实现代码：

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