掌握防抖与节流：如何用JavaScript封装通用函数

Jiaberrr2024-10-03 10:38

在日常前端开发中，我们经常会遇到一些频繁触发的事件，如窗口调整大小、滚动条滚动、输入框输入等。为了提高页面性能和用户体验，我们需要对这些事件进行优化。本文将介绍如何使用JavaScript封装通用的防抖和节流函数。

一、什么是防抖（Debounce）和节流（Throttle）？

防抖（Debounce）：当持续触发事件时，一定时间内没有再次触发事件，事件处理函数才会执行一次。如果在设定的时间内又触发了事件，则重新计算时间。
节流（Throttle）：当持续触发事件时，保证在一定时间内只执行一次事件处理函数。

二、封装防抖函数

以下是封装一个通用防抖函数的代码：

javascript 复制代码

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

使用示例：

javascript 复制代码

// 实际要执行的函数
function handleResize() {
  console.log('窗口大小改变了！');
}

// 使用防抖函数封装
const debouncedHandleResize = debounce(handleResize, 500);

// 监听窗口大小改变事件
window.addEventListener('resize', debouncedHandleResize);

三、封装节流函数

以下是封装一个通用节流函数的代码：

javascript 复制代码

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

使用示例：

javascript 复制代码

// 实际要执行的函数
function handleScroll() {
  console.log('滚动条滚动了！');
}

// 使用节流函数封装
const throttledHandleScroll = throttle(handleScroll, 1000);

// 监听滚动条滚动事件
window.addEventListener('scroll', throttledHandleScroll);

四、总结

通过封装通用的防抖和节流函数，我们可以轻松地优化页面性能，提高用户体验。在实际开发中，根据具体场景选择合适的优化策略，让我们的代码更加高效。希望本文对您有所帮助！