- - 防抖:多次触发事件只执行一次
- 管你娘的按多少次,老子只执行最后一此触发
- - 节流:一定时间内,但只执行一次事件 (一定时间内也可多次触发事件)
- 你按,你尽管按,诶,我就只按自己的节奏来,任尔东西南北风
目录
(onclick绑定 及 vue中@click绑定 使用时调用无效的解决方案!此处易犯错)
防抖:多次触发事件只执行一次
- 多次点击,只有一次执行
-
⭐代码思路:
-
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() 绑定 防抖节流 使用有原因的,看特别注意
效果展示
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() 绑定 防抖节流 使用有原因的,看特别注意
效果演示:
CodePen Home 节流https://codepen.io/sam9029/pen/PoRwymd?editors=0011
(onclick绑定 及 vue中@click绑定 使用时调用无效的解决方案!此处易犯错)
特别注意:防抖节流 在定义时 返回的是回调函数!!!
- 使用 addEventListener(事件类型,回调函数) ,便可以直接执行回调函数
- onclick绑定 及 vue中@click绑定 (❗❗❗❗以下写法是无效的❗❗❗❗)
<!-- 原生写法 -->
<div onclick='debounce(fn,1000)'></div>
<!-- Vue写法 -->
<div @click='debounce(fn,1000)'></div>
- 原因:onclick绑定 和 @click绑定 原理是直接调用,得到的是一个回调函数,并没有直接执行该回调函数
- addEventListener(事件类型,回调函数) 监听绑定 语法本身则直接执行回调函数
具体解析与详细解决方案看下文:
!!!注意:⭐暂时理解不了 call(this,arguments)的this
- 先知道其作用是 让执行函数 匹配其的执行函数上下文中的this
- call,apply,bind 使用( 待写)