JS 定时器结合闭包实现-节流与防抖

防抖：

概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。

即：如果连续触发 只会执行最后一次触发的回调。

使用场景：

百度搜索框中输入对应内容下方会有相关内容的提示，如果每输入一个文字都发送一次请求是非常浪费性能的，所以使用节流设置一个时间，只有当用户输入完内容之后不在输入，经过了预先设置好的时间才会发起请求。

// 防抖
// 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。
// 即 如果连续触发 只会执行最后一次触发的回调
// 绑定点击事件后，还要传入一个回调函数，所以通过返回一个函数，让绑定的事件去触发这个返回的函数
var btn = document.getElementById('input');
btn.addEventListener('click', debounce(submit));
function submit() {
    console.log(1);
}
function debounce(fn) {
    var t = null;
    return function () {
        if (t) {
            clearTimeout(t);   // 如果连续触发，则每次都会清除上一个定时器并重新开启一个定时器
        }
        t = setTimeout(function () {
            fn(e)
        }, 1000)
    }
}

节流：

概念：在规定的时间间隔内不会重复触发回调，只有大于这个时间间隔才会触发回调，降低触发频率。

// 节流
// 概念：在规定的时间间隔内不会重复触发回调，只有大于这个时间间隔才会触发回调，降低触发频率
var btn2 = document.getElementById('input2');
btn2.addEventListener('click', throttle(sub, 2000));
function sub() {
    console.log(1);
}
function throttle(fn, delay) {
    var begin = 0;
    return function () {
        var cur = new Date().getTime();
        console.log(cur - begin);
        if (cur - begin > delay) {
            fn();
            begin = cur;
        }
    }

}