事件节流与事件防抖

事件防抖：最后一次触发说了算。在一定时间内，不管你出发了多少次，我都只认最后一次。假设设置时间为 1000ms，这在 1000ms 内你再次触发这个事件，就添加一个新的计时器，之前的事件统统作废，只执行最后一次。这里的抖动停止表示你停止了触发这个函数，从这个时间点开始计算，当间隔时间等于你设定时间，才会执行里面的回调函数。如果你一直在触发这个函数并且两次触发间隔小于设定时间，则一定不会到回调函数那一步。。主要应用是：验证码防刷，按钮频繁点击导致多次请求，给服务器造成压力；用户注册时验证用户名是否被占用，为了提高用户体验，不是在输入框失去焦点的时候去判断，而是在用户输入的时候去判断，这样的坏处是，当用户输入第一个字符的时候就开始判断，增大了服务器的压力，理想的情况是，在用户输入一个字符一段时间内还有字符的输入就暂时不去判断。

事件节流：第一个触发说了算，按照固定的时间执行一次，无论在这个固定的时间之内触发了多少次事件，也只执行一次。主要应用是：scroll，touchmove。

事件防抖应用：需求是input输入内容停顿间隔1000ms后触发callback

var oInput = document.getElementsByTagName("input");
oInput.addEventListener("input", debounce(callback, 500))

function debounce (fn, delay) {
    let timer = null;
    // timer 状态要常驻在内存里，所以做了一个闭包
    return function() {
        let arg = arguments;
        // 每次都清除定时器
        clearTimeout(timer);
        // 重启定时器，做到每次都从最后一个触发开始计时
        timer = setTimeout(() => {
            fn.apply(this, arg)
        }, delay)
    }
}

function callback(event) {
    console.log("触发", event.target.value)
}