防抖和节流 （面试手写题）

防抖: 在指定的时间内代码只执行一次（频繁触发事件时， 代码不会执行的，当在指定的时间内不在触发事件时， 代码会执行一次, 当不再触发事件时，代码也不再执行）

 节流: 每间隔指定的时间内代码都会执行一次（频繁触发事件时，只要等待够预定的时间， 代码都会执行一次，当不再触发事件时，代码也不再执行）

  频繁触发的事件：

            键盘输入事件

            鼠标滚轮事件

            页面滚动事件

 <div class="wrap" id="wrap" style="width:100px; height:100px; overflow:auto"> let timer = null;
        function debounce(){
        if(timer){
        // 计时器中的函数才是真正的事件处理程序
        clearTimeout(timer)
        }
        timer = setTimeout(move, 1000);
        }</div>

    <div class="box" style="height:2000px"></div>

      //  js 
        //  防抖  debounce 
        function move() {
            console.log(this);
            console.log('事件执行');
        }

        /*  let timer = null;
         function debounce(){     
             if(timer){
                 //  计时器中的函数才是真正的事件处理程序
                clearTimeout(timer)
             }
             timer = setTimeout(move, 1000);
         } */

        // window.addEventListener('scroll',  debounce)

        //  fn 事件处理程序  deday 等待的时间间隔
        function debounce(fn, delay) {
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer)
                }
                console.log('计时器外边', this);
                //  存储this指向
                let _this = this;
                //  储存 event （参数）
                let args = arguments;
                timer = setTimeout(function () {
                    console.log(1, this);
                    fn.apply(_this, args)
                }, delay)
            }
        }
        wrap.addEventListener('scroll', debounce(move, 2000));



        // =================== 节流  throttle  
        //  计时器 + 时间差
        // function throttle(fn, delay) {
        //     //  声明计时器
        //     let timer = null;
        //     //  获取当前的时间  事件开始触发时的时间
        //     let start = Date.now();
        //     return function () {
        //         //  实时获取当前时间
        //         let end = Date.now();
        //         let _this = this;
        //         let args = arguments;
        //         //  计算时间差
        //         if (end - start > delay) {
        //             clearTimeout(timer)
        //             timer = setTimeout(function () {
        //                 fn.apply(_this, args)
        //             }, delay)
        //             start = end;
        //         }
        //     }
        // }

        // window.addEventListener('scroll', throttle(move, 2000))