防抖和节流

前言

在日常开发中会经常有“按钮点击查询，搜索框输入内容联想内容，监听鼠标移动事件”等等类似业务，这时经常会听到Leader说要做好优化。这里就可以使用到防抖以及节流去做优化。

防抖

防抖的目标是确保在一定时间内只执行一次函数。当事件触发后，会设置一个定时器，如果在设定的时间内再次触发相同事件，则会取消之前的定时器，重新设置一个新的定时器。只有当定时器到期后，才会执行相应的函数。

示例

function debounce(func, delay) {
  let timeoutId;

  return function() {
    const context = this;
    const args = arguments;

    clearTimeout(timeoutId);

    timeoutId = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  };
}

// 示例用法
const debouncedFunc = debounce(function() {
  console.log('Debounced Function');
}, 200);

debouncedFunc(); // 立即调用，不执行函数
debouncedFunc(); // 忽略
debouncedFunc(); // 忽略

// 等待200毫秒后执行函数
 

节流

节流的目标是确保在一定时间内不会频繁执行函数。当事件触发后，会设置一个时间，只有到达一定时间后才执行相应的函数。一旦函数执行完毕，标志位会被重置，允许下一次事件触发时再次执行函数。

示例

function throttle(func, delay) {
  let lastExecTime = 0;

  return function() {
    const context = this;
    const args = arguments;

    const currentTime = Date.now();

    if (currentTime - lastExecTime >= delay) {
      func.apply(context, args);
      lastExecTime = currentTime;
    }
  };
}

// 示例用法
const throttledFunc = throttle(function() {
  console.log('Throttled Function');
}, 200);

throttledFunc(); // 立即调用，执行函数
throttledFunc(); // 忽略
throttledFunc(); // 忽略

// 等待200毫秒后执行函数
 

总结

防抖确保了在事件频繁触发的情况下，只会在最后一次触发之后的一段时间内执行一次。

节流则确保了一段时间内只执行一次操作，即便在这段时间内多次触发事件。