js的防抖和节流

函数防抖：
函数防抖：是指连续触发事件，当一段时间后不在触发事件后，事件处理函数才会执行一次。如果在设定的时间没到之前，是不会重复执行事件的处理函数。

function debounce(func,wait = 0){
		if(typeOf func != 'function'){
			throw new TypeError('这不是个方法')
		}
		let times = null,result;
		return function(){
			let that = this,arge = arguments;
			if(times){			
				clearTimeout(timeid);
			}
			times = setTimeout(() =>{
				result = func.apply(that,arge);
			},wait)
			return result
		}
}
// 处理函数
function handle() {    
    console.log(Math.random()); 
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));

当持续触发scroll事件时，事件处理函数handle只在停止滚动1000毫秒之后才会调用一次，也就是说在持续触发scroll事件的过程中，事件处理函数handle一直没有执行。
函数节流：
函数节流：是指在在持续触发事件的时候，保证一定时间段内只调用一次事件处理函数

    function throttle(func,wait){
        let times = null,stateTime = Date.now();
        return function(){
            let curTime = Date.now();
            let that = this,arge = arguments;
            let remating = wait - (curTime -stateTime);
            if(remating <= 0){   //说明到了执行时间  没有延迟
                func.apply(that,arge);
                stateTime = Date.now();
            }else{
                times = setTimeout(func,wait)
            }
        }
    }
function handle() {      
    console.log(Math.random());
} 
window.addEventListener('scroll', throttle(handle, 1000));

在节流函数内部使用开始时间startTime、当前时间curTime与delay来计算剩余时间remaining，当remaining<=0时表示该执行事件处理函数了（保证了第一次触发事件就能立即执行事件处理函数和每隔delay时间执行一次事件处理函数）。如果还没到时间的话就设定在remaining时间后再触发 （保证了最后一次触发事件后还能再执行一次事件处理函数）。当然在remaining这段时间中如果又一次触发事件，那么会取消当前的计时器，并重新计算一个remaining来判断当前状态。

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