防抖函数和节流函数都是为了解决JavaScript中频繁触发事件而导致的性能问题，但它们的实现方式和使用场景有所不同。
一、防抖函数
防抖函数的作用是在事件触发后一定时间内没有再次触发该事件时，才执行处理方法。简单来说，就是在最后一个事件被触发后，还要等待一段时间，如果这段时间内没有再次触发事件，才执行相应的处理方法。
实现防抖函数的关键点在于设置一个定时器，在事件被触发时先清除之前设置的定时器，然后重新设置一个新的定时器，当计时器到期后执行相应的处理方法。
防抖函数适合处理诸如窗口调整、滚动等连续触发事件，并且只需要处理最后一次事件的情况。
function debounce(fn, delay) {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
二、节流函数
节流函数的作用是在一定时间间隔内最多只能触发一次事件。换句话说，就是限制事件触发的频率，避免过多的事件处理，从而提高效率。
实现节流函数的关键点在于设置一个标记变量，用来表示当前是否可以执行处理方法。当事件被触发时，先判断标记变量的值，如果为真，则执行相应的处理方法，并将标记变量设为假，然后等待一段时间后再将标记变量设为真。
节流函数适合处理诸如鼠标移动、窗口滚动等连续触发事件，并且需要限制事件处理频率的情况。
function throttle(fn, delay) {
let flag = true;
return function () {
let context = this;
let args = arguments;
if (flag) {
flag = false;
setTimeout(function () {
fn.apply(context, args);
flag = true;
}, delay);
}
};
}
三、调用方法
使用防抖函数和节流函数的时候，需要传入两个参数：处理方法和时间间隔。
防抖函数的调用示例：
function handle() {
console.log('handle');
}
let debounceHandle = debounce(handle, 300); // 将原来的处理方法传入防抖函数，并指定时间间隔
element.addEventListener('scroll', debounceHandle); // 将防抖处理方法绑定到事件上
节流函数的调用示例：
function handle() {
console.log('handle');
}
let throttleHandle = throttle(handle, 500); // 将原来的处理方法传入节流函数，并指定时间间隔
element.addEventListener('scroll', throttleHandle); // 将节流处理方法绑定到事件上
本文以监听dom元素的滚动事件为例，先将原始的处理方法 handle 传入防抖或者节流函数，并由新的函数返回。然后将返回的函数作为事件处理方法，并绑定到dom元素上。这样每次触发事件时就会执行防抖或者节流处理方法，从而达到优化性能的目的。