防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
（每次触发事件时都取消之前的延时调用方法）
function debounce(fn){
let timeout = null; //创建一个标记来存放定时器的返回值
return function(){
clearTimeout(timeout); // 每当用户输入的时候把前一个setTimeout clear 掉
timeout = setTimeout(()=> {
// 然后又创建一个新的setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
fn.apply(this,arguments);
},500)
};
}
function sayHi(){
console.log('防抖成功');
}
var ipt = document.getElementById('inputId');
ipt.addEventListener('input',debounce(sayHi))
节流
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
（每次触发事件时都判断当前是否有等待执行的延时函数）
function throttle(fn){
let canRun = true; //通过闭包保存一个标记
return function(){
//判断标记是否为true，不为true则中断往下执行
if(!canRun) return;
canRun = false;
setTimeout(() =>{
fn.apply(this,arguments);
// 可以执行下一次循环
canRun = true;
},500)
}
}
function sayHi(e){
console.log(e)
}
window.addEventListener('resize',throttle(sayHi));
