事件节流

为什么要节流？

在一些场景往往由于事件的频繁触发，而频繁地进行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(fn) {
    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));