一、防抖和节流主要是干什么的

防抖和节流主要用于控制函数执行的频率，通过限制函数的触发次数，避免函数被过度调用而引发的性能问题或产生不必要的副作用。

二、防抖

什么是防抖：

防抖的原理是在函数频繁触发时，只执行最后一次触发的函数调用。如果在指定的时间间隔内触发了多次函数调用，则仅执行最后一次调用，而忽略之前的调用。

应用场景：

搜索框实时搜索、窗口大小调整等

具体实现：

function debounce(func, delay) {let timeoutId;return function (...args) {clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(this, args);}, delay);};
}

这里的 debounce 函数接受两个参数：函数 func 和延迟时间 delay，返回一个函数。这个返回的函数会利用 setTimeout 来执行 func，并在延迟时间内遇到新的函数调用，则会清除之前的计时器重新开始计时。

三、节流

什么是节流：

节流的原理是在函数频繁触发时，控制函数的执行频率。函数将以一定的固定时间间隔来执行，无论在这段时间内触发了多少次函数调用，只会执行一次。

应用场景：

滚动事件、鼠标移动事件、窗口调整事件等

具体实现：

function throttle(func, delay) {let timeoutId;let shouldExecute = true;return function (...args) {if (!shouldExecute) {return;}shouldExecute = false;timeoutId = setTimeout(() => {func.apply(this, args);shouldExecute = true;}, delay);};
}

这里的 throttle 函数接受两个参数：函数 func 和时间间隔 delay，返回一个函数。这个返回的函数通过 setTimeout 来实现函数的延时执行，并使用 shouldExecute 标志来控制函数的执行频率。

总结：

防抖和节流能够优化函数执行频率，提升性能，控制事件触发频率，优化用户输入，实现平滑动画等。在需要控制函数执行频率以避免资源浪费、提高交互体验或优化动画效果的场景中，防抖和节流都是非常有用的技术手段

如果还是不太能理解他俩的区别，之前我在一个评论区看到一个神评：“防抖就是回城，节流就是放技能”，相信看到这句话，就能通俗易懂的理解他俩之间的区别了。