防抖和节流本质上都是控制事件执行的频率,但是触发事件的时机本质上有区别,防抖是在用户多次触发事件,当用户停止触发事件,将事件执行一次;节流是用户多次触发事件,会在多次触发的过程中,间隔执行事件。
函数防抖
简述:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。(用户多次触发事件,在用户一直触发事件中,事件不会执行,只有在用户停止触发事件一段时间之后再执行这个事件一次。)
//函数防抖
let timer = null;
window.onscroll = function(){
if(timer !== null){
clearTimeout(timer);
}
timer = setTimeout(() => {
console.log('hello world');//业务代码
timer = null;
},500)
}
函数节流
简述:当持续触发事件时,保证一定时间段内只调用一次事件处理函数,一件事如果执行的频率非常快,节流就是把频率降至指定的值。(用户多次触发事件,在用户一直触发事件过程中事件会每间隔一段时间执行一次,会执行多次)
//函数节流
let mark = true;
window.onscroll = function () {
if (mark) {
setTimeout(() => {
console.log('Hello world');//业务代码
mark = true;
}, 500)
mark = false;
}
}
闭包
闭包就是在函数内部可以访问到函数外部的参数和变量的组合,是指有权访问另一个函数作用域中的变量的函数,闭包的本质就是在一个函数内部创建另一个函数。
特性
函数嵌套函数,被嵌套函数就是一个闭包,它会被return出去
函数内部可以引用函数外部的参数和变量
参数和变量不会被垃圾回收机制回收
优缺点
1、保护函数内部的变量安全,实现封装
2、可以把这个变量当作缓存来使用
3、无法销毁变量,使用不当,容易造成内存泄漏
//闭包
let m =10;
let n =20;
function debounce(){
function eventFun(){
return m + n;//业务代码
}
return eventFun()
}
const f1 = debounce();//f1就是eventFun()执行你的业务代码函数
闭包实现封装节流和防抖
封装防抖
//封装防抖
function debounce(fn){
let timer = null;
function eventFun(){
if(timer != null){
clearTimeout(timer)
}
timer = setTimeout(() => {
fn();
timer = null;
},500)
}
return eventFun
}
window.onscroll = debounce(() => {
console.log('Hello world') //业务代码
})
封装节流
//封装节流
function debounce(fn) {
let mark = true;
function eventFun() {
if (mark) {
setTimeout(() => {
fn();
mark = true;
}, 500)
}
mark = false;
}
return eventFun
}
window.onscroll = debounce(() => {
console.log('Hello world')//业务代码
})
闭包 > 计时器 > 防抖节流 > 实现闭包封装防抖节流