防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
思路：
每次触发事件时都取消之前的延时调用方法
function debounce(fn) {
let timeout = null; // 创建定时器
return function () {
clearTimeout(timeout); // 函数每次执行先清掉之前定时器
timeout = setTimeout(() => { // 再重新创建一个新的定时器，若在定时器结束前这段时间函数再次触发，则会重复上面逻辑，直到函数不再触发，则定时器结束后执行下面代码
fn.apply(this, arguments);
}, 500);
};
}
function sayHi()
console.log('防抖成功');
}
var input = document.getElementById('input');
input.addEventListener('input', debounce(sayHi)); // 防抖
节流
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
思路：
每次触发事件时都判断当前是否有等待执行的延时函数
function throttle(fn) {
let canRun = true; // 通过闭包保存一个标记
return function () {
if (!canRun) return; // 函数执行前先判断标记的状态，若为false直接终止
canRun = false; // 走到这里说明之前标记为true，那么本轮函数可以执行，改变标记状态
fn.apply(this, arguments);
setTimeout(() => { // 函数执行后在特定时间内状态一直保持false，若再次触发则在上方直接被终止，直到定时器结束，状态被更改为true，可以再次触发
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
简单来说，防抖就是高频触发事件后只执行最后一次，节流是特定时间内只执行第一次
