什么是防抖和节流？

防抖
触发高频率事件后n秒内函数只会执行一次，如果n秒内高频事件再次触发，则重新计算时间

function debounce(fn){
	let timeout = null ;
	return function(){
		clearTimeout(timeout);
		timeout = setTimeout (() =>{
			fn.apply(this,arguments);
		},500);
	}
}
function sayHi(){
	console.log("防抖成功")
}
var inp = document.getElementById('inp');
inp.addEventListener('input',debounce(sayHi))

节流
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

function throttle(fn){
	let canRun = true ; 
	return function(){
		if(!canRun) return;
		canRun = false;
		setTimeout(() =>{
			fn.apply(this,arguments);
			canRun = true;
		},500)
	}
}
function sayHi(e){
	console.log(e.target.innerWidth,e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));