函数防抖与节流，在代码中实现更优的性能

2023-10-21 07:08:55

一、函数防抖

函数防抖是一种技术，它可以减少函数调用的次数。当一个函数被频繁触发时，我们只需要识别一次（识别第一次/最后一次）。我们可以设置一个间隔时间，当函数在该时间内被多次触发时，我们只执行一次函数调用。

函数防抖的实现有很多种，最简单的一种方法是使用JavaScript的setTimeout()函数。以下是一个示例：

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

这个函数接收两个参数：要防抖的函数和防抖的等待时间。当函数被调用时，它会首先检查是否存在一个超时的定时器。如果有，则清除该定时器。然后，它会创建一个新的定时器，并在等待时间后执行函数。

二、函数节流

函数节流是一种技术，它可以限制函数在一定时间内只能被调用一次。当一个函数被频繁触发时，我们只允许它在一定时间内被调用一次。

函数节流的实现也有很多种，最简单的一种方法是使用JavaScript的setInterval()函数。以下是一个示例：

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

这个函数接收两个参数：要节流的函数和节流的等待时间。当函数被调用时，它会首先检查函数上次被调用的时间。如果当前时间与上次被调用的时间差大于等待时间，则执行函数并更新上次被调用的时间。否则，什么都不做。