让你的代码更加顺滑 - 防抖与节流：掌握前端函数的艺术

前端

2024-02-16 13:54:35

事件的防抖和节流函数是我们经常用到的函数，在实际的开发过程中，如 scroll、resize、click、键盘等事件很容易被多次触发，频繁的触发回调会导致页面卡顿和抖动，为了避免这种情况，需要对事件进行防抖和节流处理。

防抖

防抖函数可以防止一个函数在短时间内被重复触发，它会在一定时间内只执行一次函数。例如，当你在输入框中输入文字时，防抖函数可以防止输入框的 change 事件被频繁触发，从而提高输入体验。

节流

节流函数可以限制一个函数在一定时间内只执行一次，它会在一定时间内只执行函数的最后一次调用。例如，当你在滚动页面时，节流函数可以防止 scroll 事件被频繁触发，从而提高页面的滚动性能。

防抖和节流的实现

防抖和节流函数的实现有很多种，这里介绍两种最常用的实现方法：

setTimeout() 方法

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

requestAnimationFrame() 方法

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