简单讲就是尽管你非常频繁的触发事件,但是单位时间内我只会执行一次。
比如窗口的 resize 事件,在拖动浏览器窗口的过程中,resize是会不断执行的,
频率非常之高,简直令人发指。
所以很有必要做一个节流,让事件按照一定的频率来执行,从而大大减少执行次数。
function throttle(fn, wait=500){
let last = 0
return function (){
let now = Date.now()
if(now - last > wait){
fn.apply(this, arguments)
last = now
}
}
}
简单说,就是不管你频繁的触发多少次,我只执行一次。
function debounce(fn, wait=500){
let timer = null
return function (){
let now = !timer
timer && clearTimeout(timer)
timer = setTimeout(()=>{
timer = null
}, wait)
if(now){
fn.apply(this, arguments)
}
}
}
防抖和节流的不同点在于,防抖让事件自始至终只会执行一次,
即便你不断的触发,事件只会在你最后一次触发后执行
而节流,不只是触发一次,而是单位时间内只触发一次,比方,设置为每两秒执行一次,你在60秒内触发了60次,事件只会执行30次。
本文地址:https://blog.csdn.net/zhai_865327/article/details/107538845
如对本文有疑问, 点击进行留言回复!!
同事牛逼啊,写了个隐藏 bug,我排查了 3 天才解决问题!
【JavaScript笔记(一)】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
网友评论