震惊!节流和防抖的区别

起因:

之前因为节流和防抖经常放在一起被谈及,也没有单独去使用过,一直以为这两个是一回事,直到工作中真正添加使用的时候才发现,原来这其中,另有说法!!!

说到节流和防抖,这里就不得不提一下很常用的 lodash

lodash是一个JavaScript实用工具库，提供了很多常用功能的函数，包括节流和防抖.

重点区别:

在这里我就重点说一下两者的区别了

• 节流（throttle）：
  节流函数用于限制函数在一定时间间隔内执行的频率。它确保在指定的时间间隔内，无论触发多少次函数调用，只有一次函数执行。节流常用于需要控制频繁触发的事件，以减少函数执行的次数，例如滚动事件、窗口调整事件等。

使用节流函数的优点是可以平滑地控制函数执行的频率，避免过多的计算和渲染。对于需要频繁触发的事件，节流可以有效地限制函数的调用次数，提高性能并减少资源的消耗。

• 防抖（debounce）：
  防抖函数用于在函数连续触发后，只在一定的延迟时间后执行一次函数。它会等待一段时间，如果在这个时间段内没有再次触发函数，就执行一次函数调用。如果在等待期间内再次触发函数，会重新计时等待延迟时间。

防抖常用于需要等待一段时间后执行函数的场景，例如搜索框输入事件、窗口调整结束后执行回调等。它可以避免函数在连续触发时频繁执行，只有在用户停止操作一段时间后才执行函数调用，提高性能并避免不必要的计算和请求。