防抖
连续触发事件但是在 n 秒中只执行一次函数
使用场景:
- 鼠标不断点击触发,单位时间内只触发一次
- 监听滚动事件,比如是否滑到底部自动加载更多
function debounce(fn,delay) {
let timer
return function () {
// 保存this
let context=this
// 考虑到需要执行的函数有参数的情况
let args=arguments
clearTimeout(timer)
timer=setTimeout(function(){
fn.apply(context,args)
},delay)
}
}
节流
指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间
使用场景:
- input搜索时 用户在不断输入值时,用防抖来节约请求资源
- window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
方式一:
function throttle1(fn,delay) {
let timer
return function () {
let context=this
let args=arguments
if(timer){
return
}
timer=setTimeout(function(){
fn.apply(context,args)
timer=null
},delay)
}
}
方式二:
function throttle2(fn,delay) {
let pre=0
return function () {
let now=new Date()
let context=this
let args=arguments
if(now-pre>delay){
fn.apply(context,args)
pre=now
}
}
}