防抖与节流，手打

**防抖与节流**

在开发过程中，我们经常会遇到一些需要频繁触发的事件，如点击按钮、滚动页面等。在这些场景下，如果不进行合理的处理，可能会导致性能问题或其他意想不到的问题。因此，了解和使用防抖和节流是非常重要的。

**什么是防抖**

防抖（debouncing）是一种技术，它可以在事件触发后暂停一段时间，然后再执行相应的操作。这可以帮助我们避免在短时间内连续触发多次相同的事件，从而减少不必要的性能消耗。

**什么是节流**

节流（throttling）与防抖类似，但它不是暂停一段时间，而是限制在一定时间内执行多少次事件。例如，我们可以设置每秒钟只执行一次事件，这样就可以避免在短时间内连续触发多次相同的事件。

**防抖示例**

下面是一个简单的防抖示例，使用 JavaScript 和 jQuery 实现：

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

// 使用防抖函数const debouncedFunction = debounce(function() {
 console.log('事件触发');
},500); // 每500ms 执行一次debouncedFunction(); // 触发事件debouncedFunction(); // 暂停500ms 后再执行

在这个示例中，我们定义了一个 `debounce` 函数，它接受两个参数：`func`（要执行的函数）和 `wait`（暂停时间）。然后我们使用 `setTimeout` 来实现暂停功能。

**节流示例**

下面是一个简单的节流示例，使用 JavaScript 和 jQuery 实现：

javascript// 节流函数function throttle(func, wait) {
 let timeoutId;
 return function() {
 const context = this;
 const args = arguments;
 if (!timeoutId) {
 timeoutId = setTimeout(() => {
 func.apply(context, args);
 timeoutId = null;
 }, wait);
 }
 };
}

// 使用节流函数const throttledFunction = throttle(function() {
 console.log('事件触发');
},500); // 每500ms 执行一次throttledFunction(); // 触发事件throttledFunction(); // 立即执行

在这个示例中，我们定义了一个 `throttle` 函数，它接受两个参数：`func`（要执行的函数）和 `wait`（暂停时间）。然后我们使用 `setTimeout` 来实现暂停功能。

**总结**

防抖和节流是两种常见的性能优化技术，通过它们，我们可以避免在短时间内连续触发多次相同的事件，从而减少不必要的性能消耗。上面的示例代码展示了如何使用 JavaScript 和 jQuery 实现这些功能。

**参考**

* [MDN Web Docs - Debouncing]( />* [Stack Overflow - What is debouncing?]( />* [JavaScript: The Definitive Guide - Chapter11: Timing Events](