为什么要使用防抖和节流?
当浏览器中的resize、scroll、mousemove,多次click等事件被触发时,每次触发都调用一次函数。不断地调用函数会降低性能。
为了优化性能,降低调用的频率,限制函数的执行次数,就可以采用防抖或节流。
防抖
防抖是在指定的时间内,只执行最后一次,如果在指定时间内再次被触发,则将会重新开始计时。
eg:王者回城需要等待n秒,当回城的时候被打断了,再次回城则需要再次等待n秒
// 非立即执行
function debounce(fn,delay){
var timer = null
// 在页面调用debounce函数的时候,debounce(fn)是执行一个函数
// 所以需要返回一个函数
return function(){
// 通过setTimeout的方式限制fn的执行
if(timer){
// 如果计时器存在,就清除计时器
clearTimeout(timer)
}
timer = setTimeout(() => {
// fn() //this是指向window的
fn.apply(this,arguments) //将debounce最终返回的函数this指向绑定给自身
}, delay);
}
}
//立即执行
function debounce(fn,delay){
var timer = null
return function(){
if(timer){
clearTimeout(timer)
}
if(!timer){
fn.apply(this,arguments)
}
timer = setTimeout(()=>{
timer = null
},delay)
}
}
应用场景有:搜索框输入,等用户输完后再发送请求;文本编辑器的实时保存
节流
节流是在指定的时间内,只执行一次操作
例如,王者点击技能的时候,点击完要等冷却时间过了才能被再次执行。
// 时间戳的方式
// 是在指定的时间内执行第一次
function throttle(fn,delay){
let old = 0
return function(){
let new = new Date().getTime()
if(new - old > delay){
fn.apply(this,arguments)
old = new
}
}
}
// 定时器的方式
// 是在指定的时间内执行最后一次
function throttle(fn,delay){
let timer = null
return function(){
if(!timer){
timer = setTimeout(()=>{
fn.apply(this,arguments)
timer = null
},delay)
}
}
}
应用场景有:滚动加载,快速点击,鼠标滑动,resize事件等高频事件。