函数的防抖与节流

介绍

使用场景中有一个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
        }
                
     }
 }