什么防抖和节流？有什么区别？如何实现？

防抖：出发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
实现方法：每次触发事件时都取消之前的延时调用方法：
function debounce(fn){
let timeout=null;//创建一个标记用来存放定时器的返回值
return function(){
clearTimeout(timeout);//每当用户输入的时候把前一个settimeout 清除掉
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;//在函数开头判断标记时候为true,不为true,则为return
canRun=false;//立即设置为false
setTimeout(()=>{//将外部传入的函数放在setTimeout中
fn.apply(this,arguments);
//最后在setTimeout执行完毕再把标记设置为true,表示可以执行下一次循环了，当定时器没有执行的时候标记永远时false,在开头被return掉

canRun=true;
},500)
}
}

function sayHi(e){
console.log(e.target.innerWidth,e.targetinnerHeight);
}
window.addEventListener(‘resize’,throttle(sayHi));