茶余饭后轻松聊聊手写防抖和节流

前端

2023-11-11 17:08:13

前言

防抖和节流是两个前端开发中常用的技术，它们可以帮助我们优化页面的性能，提高用户体验。防抖可以防止函数被频繁调用，而节流可以限制函数在一定时间内只被调用一次。

基本概念

防抖

防抖（debounce）是一种函数装饰器，它可以防止函数在一定时间内被重复调用。当函数被调用时，防抖函数会启动一个计时器。如果在计时器到期之前函数又被调用，那么计时器会被重置。只有在计时器到期后，函数才会被实际调用。

节流

节流（throttle）也是一种函数装饰器，它可以限制函数在一定时间内只被调用一次。当函数被调用时，节流函数会立即执行一次函数。如果在函数执行期间函数又被调用，那么这些调用会被忽略。只有在函数执行完毕后，节流函数才会允许函数再次被调用。

实现方式

防抖

防抖函数的实现方式有很多种，最简单的一种是使用 setTimeout 函数。

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

节流

节流函数的实现方式也有很多种，最简单的一种是使用 setInterval 函数。

function throttle(func, wait) {
  let lastCallTime = 0;
  return function () {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - lastCallTime > wait) {
      func.apply(context, args);
      lastCallTime = now;
    }
  };
}