事件节流

为什么要节流？

在一些场景往往因为事件的频繁触发，而频繁地进行 DOM 操作、资源加载，比方：resize、scroll、mousemove。导致 UI 卡顿甚至浏览器解体。所以，这个时候，事件节流就显得相当重要了。

节流和防抖有什么区别，别离如何实现？
1、防抖

触发高频事件后 n 秒内函数只执行一次，如果 n 秒内高频事件再次触发，则从新计算工夫。

• 办法：

每次触发事件都勾销之前的延时调用办法

function debounce(fn) {
    let timer = null; // 创立一个标记用来寄存定时器的返回值
    return function() {clearTimeout(timer); // 每当用户输出的时候把之前的一个 setTimeout 革除
        timer = setTimeout(()=>{ // 而后创立一个新的定时器
            fn.apply(this,arguments)
        }, 500)
    };  
}
 
function sayHi(){console.log('防抖');
}
 
var ele = document.getElementById('input');
ele.addEventListener('input', debounce(sayHi));

2、节流

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

• 办法：

每次触发事件时都判断是否有期待执行的延时函数

function throttle() {
    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));