【JS】防抖与节流 --- 在定义时返回的是回调函数

2022 年 9 月 10 日
四川
本文字数：1762 字
阅读完需：约 6 分钟

🦖我是 Sam9029，一个前端
Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)
**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

概念

防抖：多次触发事件只执行一次
无论触发多少次事件，只执行最后一次触发
节流：一定时间内，但只执行一次事件
固定的单位时间内只触发一次事件（期间也可多次触发事件，但无效）

防抖：多次触发事件只执行一次

多次点击，只有一次执行
⭐代码思路：
timer 存入防抖事件(存本次点击的防抖事件，利用定时器实现)
点击判断 timer 是否已存在（即当前时间范围内是否已有防抖事件）
若有，清除上一次
若无，重新为 timer 存入防抖事件
每次点击都会覆盖上一次的 timer，直到最后一次不在带点击之后执行

//被执行防抖的事件函数function fn(){console.log('debounce success!!')}//定义防抖函数function debounceFoo(foo,delay) {    let timer;    return function(){        if(timer) clearTimeout(timer);        timer = setTimeout(()=>{            // 暂时理解不了（this，arguments）指向改变的问题            foo.call(this,arguments)            // 不输入延迟 则默认 1000 ms        },delay || 1000)    }}//绑定防抖函数debounce.addEventListener('click',debounceFoo(fn,1000))

复制代码

❗关于，案例中，皆使用 addEventListener() 绑定防抖节流使用有原因的，看特别注意

效果展示（打开 console 开效果）

CodePen Home 防抖https://codepen.io/sam9029/pen/PoRwyGa?editors=1010

节流：一定时间内执行一次事件

-多次点击，可能有多次执行
⭐代码思路：
若之前无 timer，则存入节流事件
若有，if 判断中断函数
注意在已有的 timer 执行之后，释放 timer 空间，即赋值为 null

// 被执行节流的事件/函数function fn(){console.log('throttle success!!')};// 节流函数function throttle(foo,delay){    // foo-被执行节流的函数    // 节流的节奏时间间隔    // 初始化timer，并使用闭包访问    let timer;    return function(){        // 若之前已有节流，中断函数执行        if(timer) return;        // 若（之前/此时）无节流，重新设定节流        timer = setTimeout(()=>{            // 暂时理解不了（this，arguments）指向改变的问题            foo.call(this,arguments)            // 本次节流执行后，通过给timer赋值null，释放timer            timer = null            // 不输入延迟 则默认 1000 ms        },delay || 1000)    }}// 给对应的(元素)对象绑定节流函数elObject.addEventListener('chick/oninput/input……',throttle(fn,1000))

复制代码

关于，案例中，皆使用 addEventListener() 绑定防抖节流使用有原因的，看特别注意

效果演示：（打开 console 开效果）

CodePen Home 节流https://codepen.io/sam9029/pen/PoRwymd?editors=0011

！！！注意：⭐call（this，arguments）的 this

先知道其作用是让执行函数匹配其的执行函数上下文中的 this

使用 onclick 绑定时-易犯错--解决方案

同理：vue 中 @click 绑定易犯错
（onclick 绑定及 vue 中 @click 绑定使用时调用无效的解决方案！此处易犯错）
详情如下：

特别注意：防抖节流在定义时返回的是回调函数！！！

使用 addEventListener(事件类型，回调函数) ，便可以直接执行回调函数
onclick 绑定及 vue 中 @click 绑定（❗❗❗❗以下写法是无效的❗❗❗❗）

<!-- 原生写法  --><div onclick='debounce(fn,1000)'></div>
<!-- Vue写法  --><div @click='debounce(fn,1000)'></div>

复制代码

❗❗原因：onclick 绑定和 @click 绑定原理是直接调用，但是此处绑定防抖节流（即 debounce(fn,1000)）得到的是一个回调函数，并没有（也不能）直接执行该回调函数
❗❗而案例中的 addEventListener(事件类型，回调函数) 监听绑定语法本身则可以直接执行回调函数

具体解析与详细解决方案看下文：

为什么addEventListener调用防抖可以，onClick不行_半仙code的博客-CSDN博客

🦖我是 Sam9029，一个前端，坚信`应无所往`

文章若有错误，敬请指正🙏
**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**
Sam9029 的 InfoQ 主页:Sam9029 (infoq.cn)

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/822eafa979afa6e6071fe84e1】。文章转载请联系作者。

Sam9029

关注

庸俗 2022.09.03 加入

好色

发布

暂无评论

创作场景

【JS】防抖与节流 --- 在定义时返回的是回调函数

概念

防抖：多次触发事件只执行一次

节流：一定时间内执行一次事件

使用 onclick 绑定时-易犯错--解决方案

特别注意：防抖节流 在定义时 返回的是回调函数！！！

🦖我是 Sam9029，一个前端，坚信应无所往

Sam9029

评论

特别注意：防抖节流在定义时返回的是回调函数！！！

🦖我是 Sam9029，一个前端，坚信`应无所往`