防抖与节流
防抖:
当事件被触发的时候,设定一个周期,如果这个周期之内,这个事件又被触发了,那么就在设定一个周期,一直到这个周期内这个事件不在被触发,才会执行这个事件
手写:
function debounce (fun, delay) {
//防抖函数需要传入2个参数,一个为事件函数,一个为周期时间
const _this = this; //先将this保存下来,保持this的指向相同
const timer = null; //设定一个定时器,当调用的时候西安清空定时器
return function() { //返回一个函数
const args = arguments; //需要对fn的参数进行保存
if(timer) { // 如果定时器存在的话,我们需要对定时器进行清空,重新计时
clearTimeout(timer)
}
timer = setTimeout( () => {
fun.call(_this, ...args); //执行事件函数,需要用到之前保存的this和arguments
}, delay)
}
}
节流:
当事件被触发的时候,设定一个事件周期,不管期间这个事件被触发了多少次,到了这个时间,就会执行一次事件。之后如果还有事件的触发,就再重新设定一个周期,到时间执行。
手写:
function throttle(fun, delay) {
let _this = this; //也是需要对this进行保存
let timer = null;
return function() {
const args = arguments;
if(!timer) { //直到定时器不存在,需要先设置一个新的定时器
timer = setTimeout( () => {
timer = null; //需要将定时器清零
fun.call(_this, ...args); //执行我们的事件函数
}, delay)
}
}
}