JS 防抖与节流

防抖：

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

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

使用场景：

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

// 防抖
        // 概念：用户连续点击，前面的触发都被取消，只有最后一次触发的回调在规定时间后才会触发。
        // 即 如果连续触发 只会执行最后一次触发的回调
        // 触发点击事件回调函数中的函数形参（提交函数）
        var btn = document.getElementById('input');
        btn.addEventListener('click', debounce(submit, 2000, true));
        // 提交函数
        function submit(e) {
            // 想让submit中使用到e
            console.log(1);
            console.log(this);
            console.log(e);
            console.log(arguments);
        }
// 进阶版：第一次点击是立即执行的
// 这个触发提交函数的条件是 是否是第一次点击，
//如果是连续点击的话定时器内代码还没执行，t就不是null，上一个定时器就会被清除然后重开
        function debounce2(fn, timer) {
            // 是否重置定时器的标识
            var t = null;
            // 返回的函数是最后点击事件所触发的回调函数
            return function () {
                // 判断 null 的时候尽量先转换成布尔值进行判断
                var firstClick = !t;
                // 如果定时器内代码没有执行（定时器还没走完，t没有被重置为null）
                // 就清空上一个定时器并且重开一个新的定时器
                if (t) {
                    t.clearTimeout();
                }
                // 判断是否是第一次执行（定时器已经执行完，t被重置为null）
                if (firstClick) {
                    // 为了让 submit 发送请求的函数可以访问到DOM实例对象，使用apply调用函数
                    fn.apply(this, arguments);
                }
                t = setTimeout(() => {
                    t = null;
                }, timer)
            }
        }

节流：

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

// 节流
        // 概念：在规定的时间间隔内不会重复触发回调，只有大于这个时间间隔才会触发回调，降低触发频率
        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起始值要被设置为触发满足触发条件的时间戳
                    begin = cur;
                }
            }

        }