介绍
使用场景中有一个submit按钮,用于提交信息,如果不做防抖处理,有时候点快了可能会提交两次,如果使用disable去处理,一个地方还好,多个地方都需要这么处理怎么办,就可以用到防抖和节流了,诸如此类的场景在onmousemove,resize等场景均可以用到。
<button id="submit">点击</button>
<script>
let sub=document.getElementById('submit');
sub.addEventListener('click',submit,false)
function submit(){
console.log('提交')
}
<script/>
防抖函数
函数防抖,第一次点击后需要等待 timer 秒才能继续触发事件,每次点击都会重新计时
sub.addEventListener('click',debounce(submit,1000,true),false)
function debounce(fn,timer,triggleNow){
var t=null
return function(){
if(t){
clearTimeout(t)
}
if(triggleNow){
var firstClick=!t
if(firstClick){
fn.apply(this,arguments)
}
t = setTimeout(()=>{
t=null;
},timer)
}else{
t=setTimeout(()=>{
fn.apply(this,arguments)
},timer)
}
}
}
节流函数
函数节流,在第一次触发事件后需要间隔 timer 秒才能触发下一次,每次点击不会重新计时
sub.addEventListener('click',debounce(throttle,1000),false)
function throttle(fn,timer){
let begin=0;
return function(){
let now=new Date().getTime()
if(now-begin>timer){
fn.apply(this,arguments)
begin=now
}
}
}