防抖的概念
防抖又叫为函数防抖(debounce):指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。
前端开发中,常见的事件如,onresize,scroll,mousemove ,mousehover 等会短时间内多次触发(频繁触发),不做限制的话可能一秒执行几百次,
在这些函数内部如果还执行了其他函数,尤其是执行了操作 dom 的函数的话(浏览器操作 DOM 是很耗费性能的),那不仅会浪费计算机资源,
还会降低程序运行速度,甚至造成浏览器卡死、崩溃。
除此之外,短时间内重复调用 ajax 不仅会造成数据关系的混乱,还会造成网络拥堵,增加服务器压力等问题。
防抖代码实现
防抖的关键是需要一个 setTimeout 来辅助实现,延迟运行需要执行的代码。
如果方法多次触发,则把上次记录的延迟执行代码用 clearTimeout 清掉,重新开始计时。
若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码。
注意:当你一直连续不断的点击超过你设置的时间,并且只有第一次点击有效,这不是bug,这是概念问题,注意看下面标红这部分,
防抖又叫为函数防抖ÿ