在前端开发中，我们经常会遇到一些需要频繁触发的事件，比如滚动事件、窗口大小改变事件、输入框输入事件等等。这些事件如果不做任何处理，就会频繁地触发，影响页面的性能和用户体验。为了解决这个问题，我们需要使用一些技术手段来进行防抖和节流。
什么是防抖和节流
防抖和节流是两种常见的性能优化技术，它们的目的都是减少函数的执行次数，提高页面的性能和用户体验。
防抖（debounce）是指在一段时间内，如果同一个函数被连续触发多次，只执行最后一次。比如在搜索框中输入关键词时，我们希望用户输入完毕后再触发搜索事件，这时就可以使用防抖技术。
节流（throttle）是指在一段时间内，无论函数被触发多少次，只执行一次。比如在滚动事件中，我们希望滚动结束后再执行一些操作，这时就可以使用节流技术。
ES12 中的防抖和节流
在 ES12 中，防抖和节流已经被纳入了 JavaScript 的标准库中，我们可以直接使用 setTimeout 和 setInterval 来实现。
防抖
下面是一个简单的防抖函数的实现：
// javascriptcn.com 代码示例
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}这个函数接受两个参数，第一个参数是要执行的函数，第二个参数是防抖的时间间隔。在函数被触发时，会清除之前的定时器，然后设置一个新的定时器，延迟一定的时间后执行函数。
下面是一个使用防抖函数的例子：
// javascriptcn.com 代码示例
function search(keyword) {
console.log(`searching for ${keyword}`);
}
const debouncedSearch = debounce(search, 500);
document.querySelector('input').addEventListener('input', (event) => {
debouncedSearch(event.target.value);
});这个例子中，当用户在输入框中输入关键词时，会触发 search 函数。但是由于使用了防抖函数，只有在用户输入完成一段时间后才会执行搜索操作。
节流
下面是一个简单的节流函数的实现：
// javascriptcn.com 代码示例
function throttle(func, delay) {
let timer = null;
return function(...args) {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, args);
timer = null;
}, delay);
}
};
}这个函数接受两个参数，第一个参数是要执行的函数，第二个参数是节流的时间间隔。在函数被触发时，会判断是否已经存在定时器，如果不存在就设置一个新的定时器，延迟一定的时间后执行函数。
下面是一个使用节流函数的例子：
function onScroll() {
console.log('scrolling');
}
const throttledScroll = throttle(onScroll, 500);
window.addEventListener('scroll', throttledScroll);这个例子中，当用户滚动页面时，会触发 onScroll 函数。但是由于使用了节流函数，只有在用户停止滚动一段时间后才会执行滚动操作。
总结
防抖和节流是两种常见的性能优化技术，可以减少函数的执行次数，提高页面的性能和用户体验。在 ES12 中，防抖和节流已经被纳入了 JavaScript 的标准库中，我们可以直接使用 setTimeout 和 setInterval 来实现。在实际开发中，我们需要根据具体的场景选择适合的技术手段来进行优化。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6566f176d2f5e1655dfddfbf