防抖:
在一定时间内执行最后一次操作;
节流:
在一定时间内执行一次操作;
如果不理解的可以去看看其他的文字解释;
先来防抖代码再做解释 :
function fn(foo) {
let timer = null
return () => {
if(timer !== null) clearTimeout(timer)
timer = setTimeout(() => {
foo()
}, 1000)
}
}
function foo() {
console.log('防抖');
}
从以上代码中可以看出来: 重点就是fn函数中return这一部分 ; if判定这儿 可以这样理解: 如果 timer 不等于null 那么就表示已经有一个事件在执行了 ; 而我们要做的是让其只执行最后一次操作 ; 那么我们就需要把以前的给清除掉 , 然后再执行 ; 就这么简单;完成啦!
以上代码用的是ES6的箭头函数; 如果是用普通函数的话 就需要改变this的指向问题了;上代码
function fn(foo) {
// 声明一个时间变量
let timer = null
// 返回一个函数值
return function(){
// 将this指向赋值 此时的 this 指向的是 实例 button
let context = this
// 获取传过来的值
let ages = arguments
// 清除定时器
clearTimeout(timer)
// 声明一个定时器
timer = setTimeout(()=>{
// 在定时器里面调用需要 防抖的函数
foo.call(context,ages)
},1000)
}
}
// 需要防抖的函数
function foo (){
console.log(4156);
}
再给上节流代码
function fn(foo) {
let timer = null
return ()=>{
if(!timer){
timer = setTimeout(() => {
foo()
timer = null
}, 2000);
}
}
}
function foo(){
console.log('节流');
}
从以上代码中可以看出来: 重点呢还有fn函数中return这一部分 ; if判定这儿 可以这样理解: 如果 timer 等于null 的时候才执行函数里面的代码 ; 并且把定时器恢复为 null 一遍下一次的执行 ; 就这么简单;完成啦!
以上代码用的是ES6的箭头函数; 如果是用普通函数的话 就需要改变this的指向问题了;上代码
function fn(foo) {
// 声明一个时间变量
let timer = null
// 返回一个函数值
return function(){
// 将this指向赋值 此时的 this 指向的是 实例 button
let context = this
// 获取传过来的值
let ages = arguments
// 清除定时器
// clearTimeout(timer)
if(!timer) { // 判定timer没有数值
// 声明一个定时器
timer = setTimeout(()=>{
// 在定时器里面调用需要 节流的函数
foo.call(context,ages)
// 如果执行到这儿的是否需要把 timer 初始化 为null ;便于下次判断
timer = null
},3000)
}
}
}
// 需要节流的函数
function foo (){
console.log(4156);
}