js节流与防抖

防抖

定义：高频事件触发，函数在最后触发的n秒后执行。每触发一次重新计时，函数总是在操作触发的最后一次的规定时间后执行。
实现：

function debounce(fn, time,args) {
 let timeout = null;
 return function(){
		timeout  && clearTimeout(timeout)
		timeout = setTimeout(()=>{
			fn.apply(this, args);
		},time)
	}
}

使用：

function fn(args){
	// 事件的逻辑处理
}
window.onscroll = debounce(fn,args)

节流

定义：高频事件触发，函数在n秒内只执行一次。多次触发事件，函数总是在第一次触发开始计时，规定的时间后开始执行。
实现：

function throtle(fn,time,args){
        let canRun = true;
        return function(){
            if(!canRun) return
            canRun = false;
            setTimeout(()=>{
                fn.apply(this, args);
                canRun = true
            },time) 
        } 
    }

节流和防抖最大的区别是开始计时的起点，节流在多次触发的第一次，防抖在多次触发的最后一次。