在前端开发中，我们经常会遇到一些频繁触发的事件，比如窗口的滚动、输入框的输入等。这些事件有时候会引发性能问题，因为它们可能会频繁地调用处理函数，占用大量的计算资源。
为了解决这个问题，我们可以使用防抖（Debouncing）和节流（Throttling）技巧。本文将介绍什么是防抖和节流，以及如何在JavaScript中实现它们。
防抖（Debouncing）
防抖是指当一个函数频繁地触发时，只有在某个时间段内没有再次触发时，才会执行一次该函数。
防抖的原理是使用定时器，在事件触发后设定一个等待时间，如果在这个等待时间内再次触发了事件，则清除之前的定时器重新设定新的定时器。只有在等待时间结束后，定时器回调函数才会被执行。
以下是一个使用防抖技巧的例子，假设我们有一个输入框，用户输入时会触发一个函数进行搜索操作：
function debounce(func, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
const handleInput = debounce(function () {
// 执行搜索操作
}, 300);
在上面的代码中，debounce函数接收一个函数和一个延迟时间作为参数，并返回一个新的函数。这个新的函数在被调用时会清除之前的定时器，并设定一个新的定时器。只有在延迟时间结束后，传入的函数才会被执行。
通过使用防抖技巧，我们可以减少频繁触发的函数调用次数，从而提升性能。
节流（Throttling）
节流是指当一个函数频繁地触发时，在某个时间段内只会执行一次该函数。
节流的原理是使用一个时间戳来标记上次函数执行的时间，在函数被触发时，首先判断当前时间与上次执行时间的差值是否大于等待时间。如果大于等待时间，则执行该函数，并更新上次执行时间的标记为当前时间。
以下是一个使用节流技巧的例子，假设我们有一个窗口滚动事件，我们希望在滚动过程中每隔一段时间执行一次函数：
function throttle(func, delay) {
let lastExecTime = 0;
return function () {
const now = Date.now();
if (now - lastExecTime > delay) {
func.apply(this, arguments);
lastExecTime = now;
}
};
}
const handleScroll = throttle(function () {
// 执行滚动处理操作
}, 300);
在上面的代码中，throttle函数接收一个函数和一个延迟时间作为参数，并返回一个新的函数。这个新的函数在被触发时，会判断当前时间与上次执行时间的差值是否大于等待时间，如果大于等待时间，则执行传入的函数，并更新上次执行时间的标记为当前时间。
通过使用节流技巧，我们可以限制函数的执行频率，防止过多的资源被占用，从而提高应用的性能。
小结
防抖和节流是两种常用的性能优化技巧，可以帮助我们处理频繁触发的事件，提升应用的性能。
防抖通过使用定时器，只有在一段时间内没有再次触发事件时才执行函数；节流通过判断当前时间与上次执行时间的差值，只有在一段时间内没有执行过函数时才执行函数。
在实际开发中，我们可以根据具体场景选择使用防抖还是节流，以提升应用的用户体验和性能。
希望本文对你理解和应用JavaScript防抖与节流技巧有所帮助。如果你有任何疑问或建议，请随时留言。
本文来自极简博客，作者：琉璃若梦，转载请注明原文链接：JavaScript防抖与节流技巧
