閉包：

 <script>
        /* 
            小目標
                讓外部作用域讓函式裡面的變數
            解決方案:
                在外部函式fn函式裡面再套一個函式,形成了一個函式的巢狀關係
                在內部函式當中,直接訪問這個變數
                在外部函式當中返回內部函式
            像這種外部函式裡面套一個函式,形成了函式的巢狀關係 => 我們叫做閉包
            閉包形成的條件
                內部函式引用了外部的變數的區域性變數
            閉包在哪裡?
                如圖
            閉包的作用:
                1.閉包當中的變數會一直存在於記憶體當中,可以一直給我們來進行使用
                    (訪問函式內部變數、保持函式在環境中一直存在，不會被垃圾回收機制處理)
                2.外部作用域可以訪問函式內部的變數
            閉包的缺點:
                因為區域性變數會一直存在於記憶體當中,所以會一直佔用這記憶體空間,對於IE低版本的瀏覽器來說,容易造成記憶體洩露,消耗記憶體
            閉包的應用場景
            為什麼要使用閉包?
                對於普通函式來講,函式執行完畢之後,會釋放掉其記憶體空間
                閉包,不會主動的釋放記憶體空間
            使用閉包完畢之後:
                手動的來釋放空間
                    f = null;
        */      
        function fn(){
            var a = 10;//這個變數會一直存在於記憶體中,一直提供給我們來進行使用
            /* 在函式裡面再套一個函式,形成一個函式的巢狀關係 */
            /* 這個內部函式要被呼叫 */
            function inner(){
                //在內部函式當中,直接訪問這個變數
                return a;
                // console.log(a);
            }
            //在外部函式當中直接返回內部函式
            return inner;
        }
        var f = fn();//得到這個f=>整個內部函式
        // console.log(f);//輸出了這個內部函式
        //用完之後,記得手動方式
        f = null;
        // console.log(f());//獲取到了外部函式裡面的這個變數
    </script>

節流：

 <script>
        /* 在處理某一些業務的時候,短時間觸發大量的事件,對瀏覽器造成的很大的壓力,導致瀏覽器的效能變差 */
        /* 使用節流來提高效率 */

        //開始時間 
        let firstTime = 0;
        document.onmousemove = function(e){
            /* 獲取當中時間的事件戳 */
            let nowTime = +new Date();
            if(nowTime - firstTime < 1000){
                //不要讓程式碼往後面走,就是不要觸發事件
                return;
            }
            //下一個時間段,又是從頭開始
            firstTime = nowTime;

            //執行業務程式碼
            console.log("=============");
            console.log(e);
            console.log("=============");
        }
    </script>

封裝節流：

   <script>
        /* 將業務程式碼與節流程式碼剝離出來 */

        //業務程式碼
        function fn(e){
            console.log("=============");
            console.log(e);
            console.log("=============");
        }
        
        document.onmousemove = throttle(fn,1000);
        //節流函式
        function throttle(fn,time){
            //開始時間
            let firstTime = 0;
            return function(){
                //獲取當中的時間戳
                let nowTime = +new Date();
                /* 使用節流觸發時間的頻率 */
                if(nowTime - firstTime < time){
                    /* 在觸發時間頻率之內,程式碼不要往後面走 */
                    return;
                }
                //當進入在一個時間頻率,firstTime = nowTime
                firstTime = nowTime
                // console.log(arguments[0]);
                //觸發業務程式碼
                fn.call(this,arguments[0]);
            }
        }

        /* 只觸發一次 */
        // document.onmousemove = fn();
    </script>f

防抖：

<!-- 
        我們估摸著使用者一般2000觸發打完賬號

        節流:
            短時間當中觸發大量事件=>短時間當中觸發少次事件
        防抖:
            短時間連續觸發事件=>短時間觸發一次事件
     -->
    賬號: <input type="text" placeholder="請輸入賬號" id="inp">
    <script>
        //業務程式碼
        function fn(e){
            console.log("=============");
            console.log(e);
            console.log("=============");
        }
        //鍵盤起來事件
        inp.onkeyup = debounce(fn,2000)

        function debounce(fn,time){
            let timer = null;
            return function(){
                clearTimeout(timer)
                timer = setTimeout(() => {
                    fn.call(this,arguments[0]);
                }, time);
            }
        }
    </script>