防抖 和 节流 是两个常用的 JavaScript 函数优化技巧，它们可以用来提高性能并减少不必要的函数调用。

防抖

防抖 函数会在一定时间内只触发一次，即使在该时间内函数被多次调用。

实现原理

防抖函数通常使用计时器来实现。当函数被调用时，会启动计时器。如果在计时器超时之前函数再次被调用，则会重置计时器。只有在计时器超时之后，函数才会真正执行。

示例

JavaScript

function debounce(func, wait) {let timer;return function (...args) {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {func.apply(this, args);}, wait);};
}// 使用示例const debouncedFunction = debounce(() => {// 函数体
}, 1000);// 在 1000 毫秒内，无论函数被调用多少次，只会执行一次

节流

节流 函数会在一定时间内只执行一次，即使在该时间内函数被多次调用。

实现原理

节流函数通常使用计时器来实现。当函数被调用时，会检查计时器是否正在运行。如果计时器正在运行，则函数不会执行。只有在计时器停止之后，函数才会执行。

示例

JavaScript

function throttle(func, wait) {let lastTime = 0;return function (...args) {const now = Date.now();if (now - lastTime >= wait) {func.apply(this, args);lastTime = now;}};
}// 使用示例const throttledFunction = throttle(() => {// 函数体
}, 1000);// 在 1000 毫秒内，函数只会执行一次

区别

防抖 和 节流 的主要区别在于：

• 防抖 函数会在一定时间内只触发一次，即使在该时间内函数被多次调用。
• 节流 函数会在一定时间内只执行一次，即使在该时间内函数被多次调用。

应用场景

• 防抖 函数通常用于以下场景：
  • 搜索框输入
  • 按钮点击
  • 滚动事件
• 节流 函数通常用于以下场景：
  • 窗口 resize 事件
  • 鼠标移动事件
  • 滚动事件

总结

防抖 和 节流 是两个常用的 JavaScript 函数优化技巧，它们可以用来提高性能并减少不必要的函数调用。选择使用哪个技巧取决于具体的应用场景。

函数会在一定时间内只触发一次 意味着在该时间内，无论函数被调用多少次，它只会执行一次。

函数会在一定时间内只执行一次 意味着在该时间内，函数最多只会执行一次。如果在该时间内函数被多次调用，则只有第一次调用才会执行，后续调用会被忽略。