1、什么是防抖和节流?有什么区别?如何实现?
防抖
触发高频事件后n秒只会执行一次,如果n秒内高频事件再次被触发,会重新计算事件
思路
每次触发事件时都取消之前的延时调用方法
代码
let time=null
//使用延时定时器设置防抖动
btn.onclick=funtion(){
clearTime(time)
time=setTimeout(()=>{
请求数据
},1000)
}
//进阶封装
function debounce(callback,delay){
//利用闭包存放,定时器的序号
let timer=null
return function(){
clearTimeout(time)
timer=setTimeout(callback,delay)
}
}
btn.onclick=debounce("需要防抖的执行函数",1000)
//升级版本
debounceCallback 需要防止抖动的函数
normallallback 不需要防止抖动的函数
function debounce(debounceCallback,normallallback,delay){
//利用闭包存放,定时器的序号
let timer=null
return function(){
normallallback()
clearTimeout(time)
timer=setTimeout(callback,delay)
}
}
节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率
思路:
每次触发事件时都判断当前是否有等待执行的延时函数
let flag=true
function headleClick(){
//flag相当于是一个门 一次只能放一个人进去
if(!flag) return
flag = false
setTimeout(()=>{
flag = true
},1000)
}
btn.onclick = handleClick
封装
function throttle(callback,delay){
return function(){
if(!flag) return
setTimeout(()=>{
flag=false
callback()
},delay)
}
}