防抖函数与节流函数

防抖：触发高频事件后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 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(() => { fn.apply(this,argument); // 最后在setTimeout执行完毕后再把标记设置为true表示可以执行下一次循环了，当定时器没有执行的时候标记为false canRun = true },500) }}function sayHi(e) { console.log(e.target.innerWidth, e.target.innerHeight)}window.addEventListener(‘resize’, throttle(sayHi));