实现防抖节流

防抖

当频繁触发某一事件,为了不让它频繁调用绑定的方法,采用防抖和节流的方式,减少相应方法的调用次数,增强性能

防抖的原理:

在规定时间内频繁触发只会执行第一次或最后一次,这个规定时间内再次触发会清除之前的定时器再设计一个定时器,这样之前定时器内调用的方法就不奏效了.所以只有触发后一段时间不再触发才会不再清空定时器,使最后设计的定时器规定时间后执行(设置不立即执行),立即执行的防抖是在immdiate为true并且timer为null的时候执行的,也就是说当点击的时候要确保此时没有定时器,有定时器的情况再点击处于频繁触发的情况

防抖代码

function debounce(func,wait,immdiate){
	let timer=null
    return function fun(...args){
    	let canDo=immdiate&&!timer
        canDo?func.call(this,...args):null
    	clearTimout(timer)
        timer=setTimeout(()=>{
        	timer=null
            !immdiate?func.call(this,...args):null
        },wait)
    }
}

节流

节流的原理,会把当前触发的时间拿到与上次执行的时间相减,如果间隔超出了规定时间,就要立即执行,并重新设置previous,如果间隔小于规定时间,现在不能立即执行,要设计定时器(在没有定时器的时候设置),在(wait-间隔时间)之后执行方法,并且改变previous,清空定时器并设为null,这里要注意一点如果已经有定时器了就不用操作直接等待定时器到时间就行了

节流代码

	function throttle(func,wait){
    	let timer=null,
        	previous=0
        return function fun(...args){
        	let now=new Date()
            let minus=wait-(now-previous)
            if(minus<0){
            	func.call(this,args)
                previous=now
            }else if(!timer){
            //没有timer再设计timer,避免设计多个timer
            	timer=setTimeout(()=>{
                clearTimeout(timer)
                timer=null
                previous=new Date()
                func.call(this,args)
                },minus)
            }
        }
    }