JS函数防抖和函数节流及其使用场景

最新推荐文章于 2022-08-09 12:00:25 发布

crush194

最新推荐文章于 2022-08-09 12:00:25 发布

阅读量340

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_60814347/article/details/126147039

版权

本文介绍了JavaScript中的防抖（debounce）和节流（throttle）函数，这两种技术常用于限制函数执行的频率。防抖函数确保在设定的时间间隔内只执行最后一次触发的事件，而节流函数则是在设定的时间间隔内仅允许执行一次。它们分别适用于滚动条监听、搜索输入实时更新、按钮下拉刷新等场景，以避免频繁操作导致的资源浪费。

摘要由CSDN通过智能技术生成

一.防抖函数

1.函数防抖 （debounce）

函数防抖（：当持续触发事件时，在设置的时间周期内没有再触发事件，事件处理函数才会执行一次，如果设定的周期没有结束，又一次触发了事件，就重新开始延时执行【永远执行最后一次】

比如200ms，然后：

如果在200ms内没有再次触发事件，那么执行函数
如果在200ms内再次触发函数，那么当前的计时取消，重新开始计时

2.实现思想

(1).debounce 函数进入页面立即执，且必须返回函数

(2).当触发一个函数时，并不会立即执行这个函数，而是会延迟,通过定时器setTimeout设置时间来延迟函数的执行

(3).如果在此期间有再次触发这个函数，那么clearTimeout取消这个定时器；

(4).定义debounce函数要求传入两个参数

需要处理的回调函数callback；

延迟时间time;

3.代码实现

  function debounce(callback,time=300){   //callback 回调函数 // time=300 默认时间
        let t;                            
        return function(){
            clearTimeout(t);
            t = s