防抖和节流：优化前端性能的利器

前端

2023-11-08 07:14:35

1. 防抖和节流的概念

防抖（debounce） 是指在一段时间内，只有当连续触发的事件停止一段时间后，才会执行函数。

节流（throttle） 是指在一段时间内，函数只能执行一次，即使在该时间段内触发了多次事件。

2. 防抖和节流的原理

防抖原理 ：

防抖函数会创建一个定时器，当事件触发时，定时器会重新开始计时。如果在定时器结束之前事件再次触发，定时器就会被重置。只有当定时器结束时，函数才会被执行。

节流原理 ：

节流函数会创建一个标记，用于跟踪函数是否正在执行。当事件触发时，如果标记为false，则函数将被执行，并将标记设置为true。当函数执行完毕后，标记将被重置为false。如果在函数执行期间再次触发事件，函数将不会被执行，直到标记被重置为false。

3. 防抖和节流的实现方法

防抖实现方法 ：

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

节流实现方法 ：

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