防抖与节流函数：理解与实现

前端

2023-10-16 17:45:52

在现代互联网应用中，我们经常会遇到高频触发的场景，例如：鼠标移动、键盘输入、滚动事件等。这些事件往往会触发大量的函数调用，如果这些函数的执行时间过长，就会导致页面卡顿或延迟。

防抖与节流函数的引入正是为了解决这个问题，它们可以通过控制函数执行的频率来减少对性能的影响，从而保证页面的流畅性和响应速度。

防抖函数

防抖函数的本质是延迟执行函数，它会将多个连续触发的函数调用合并为一次，从而减少函数的执行次数。

防抖函数的实现思路

防抖函数的实现思路有多种，其中最简单的一种是使用定时器，这种实现方式的基本原理是：

当函数被触发时，先启动一个定时器，并在指定的时间段内等待。
如果在等待的时间段内，函数再次被触发，则重新启动定时器，并重置等待时间。
当等待时间结束后，如果函数没有再次被触发，则执行函数。

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

节流函数

节流函数与防抖函数相似，但它不是延迟执行函数，而是限制函数执行的频率。

节流函数的实现思路

节流函数的实现思路也有多种，其中最简单的一种是使用时间戳，这种实现方式的基本原理是：

当函数被触发时，先获取当前时间戳。
如果当前时间戳与上次函数执行的时间戳之差大于等于指定的节流时间，则执行函数。
否则，忽略函数调用。

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

防抖与节流函数的应用场景

防抖与节流函数在前端开发中有很多应用场景，例如：