防抖与节流--个人笔记

在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。

防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

function debounce(fn,delay){
    let timer = null 
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) 
    }
}

节流：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

//setTimeout实现
function throttle(fn,delay){
    	let timer = null
    	return function (){
    		let context = this
    		let args = arguments
    		if(!timer){
    		        timer= setTimeout(()=>{
                            fn.apply(context,args)
                            timer= null
                        },delay)
    		}
    	}

}
//定时器实现    
function throttle(fn,delay){
    	let previous = 0
    	return function (){
    		let now = new Date()
    		let context = this
    		let args = arguments
    		if(now - previous > delay){
    			fn.apply(context,args)
    			previous = now
    		}
    	}

}

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。