函数防抖与节流：前端性能优化秘籍

前端

2024-01-11 05:39:01

深入理解函数防抖与节流｜揭秘前端性能优化利器

函数防抖与节流：有何不同？

函数防抖和节流都是用于控制函数执行频率的技术，但它们的工作方式不同：

函数防抖： 当一个函数被多次触发时，防抖会确保函数只执行一次，并且是在最后一次触发后的指定时间间隔后执行。
函数节流： 当一个函数被多次触发时，节流会确保函数在一定时间间隔内只执行一次。

何处使用函数防抖和节流？

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

事件监听： 防止重复触发事件监听器，例如在鼠标移动或滚动事件中。
表单验证： 防止频繁执行验证，例如在键盘输入时。
网络请求： 防止多次发送重复的请求，例如在用户连续点击按钮时。
动画： 控制动画的执行速度，防止过度动画。

实现函数防抖和节流

在 JavaScript 中，可以使用以下代码实现函数防抖和节流：

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

// 函数节流
function throttle(func, wait) {
  let previous = 0;
  return function() {
    const now = new Date().getTime();
    if (now - previous > wait) {
      func.apply(this, arguments);
      previous = now;
    }
  };
}

示例

以下示例展示了如何使用函数防抖和节流优化一个事件监听器：

// 使用防抖优化 mousemove 事件监听器
document.addEventListener('mousemove', debounce((e) => {
  console.log(`鼠标移动至 x: ${e.clientX}, y: ${e.clientY}`);
}, 250));

// 使用节流优化 keyup 事件监听器
document.addEventListener('keyup', throttle((e) => {
  console.log(`按键 ${e.key} 被释放`);
}, 500));