防抖和节流

防抖

定义：规定时间内多次触发只执行一次
如果在200ms内没有再次触发滚动事件，那么就执行函数
如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

实现：

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}
window.onscroll = debounce(showTop,1000)
//return的是一个函数， 一直在调用这个return的函数

节流

触发函数后，函数在规定时间后执行，规定时间期间内无法再次触发函数
实现：

//use setTimeout
function throttle(fn,delay){
    let valid = true
    return function() {
    	let that = this;
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()//箭头函数
            
           // fn.apply(this,arguments)//常规函数
            //setTimeout(function(){}
            
            valid = true;
        }, delay)
    }
}

//use Date
function trotte(fn, time){
	let activateTime = 0;
	return ()=>{
		const current = Date.now();
		if(currrent - activateTime > time){
			fn();
			activateTime = Date.now;
		}
	}
}
	
window.onscroll = throttle(showTop,1000)