防抖函数和节流函数是什么？怎么实现？

【问】防抖函数和节流函数是什么？怎么实现？

【答】防抖是在指定时间段内，事件只能触发一次；节流是在每指定时间内，事件只能触发一次。使用场景： 如监听窗口变化的onresize不拖动后再渲染页面，所以用防抖; input的onchange不停输入时，每3秒才去请求一次接口，所以一般用节流，但此处用防抖也可以，所以看具体业务

• 防抖实现

//如窗口一直缩放时，不触发；2s内窗口变化时，才去触发函数。
//实现思路：在指定延迟时间内重新触发时，撤销该触发，直至该指定的延时时间内没再触发该事件，才去有效触发事件。
function debounce(fn, delay){
    let timer = null;
    return function(){
	    if(timer){
        	clearTimeout(timer)
	    }
	    timer = setTimeout(fn, delay)
    }       
}
window.onresize = debounce(
    function(){
        console.log('窗口一直变化时，不触发；2s内无缩放窗口时，才去触发')
	},
	2000);

• 节流实现

//如窗口一直缩放时，每2s才触发一次。
//实现思路：在指定延迟时间内重新触发时，有效触发一次，相当于降频操作。
function throttle(fn, delay){
	let valid = true;
	return function(){
		if(!valid){
			return false;
		}
		valid = false;
		setTimeout(()=>{
			fn();
			valid = true;
		}, delay)
	}
}
window.onresize = throttle(
    function(){
        console.log('窗口一直变化时，每2s才触发一次')
	},
	2000);

参考1：浅谈 JS 防抖和节流