防抖&節流

使用的原因

在前端開發當中有一部分的用戶行為會頻繁操作觸發事件執行，而對於DOM操作，資源載入等耗費性能的處理，很可能導致頁面卡頓，甚至瀏覽器崩潰，函數節流和防抖就是解決類似需求應運而生的

節流

預定一個函數只有在大於等於執行周期時才執行，周期內調用不執行，就像水滴攢到一定重量會下落一樣

運用場景：

• 視窗調整（resize）
• 頁面滾動（scroll）
• 搶購瘋狂點擊（mousedown）

        let throttle =  (fn,waitTime) => {
            let lastTime = 0;
            return function () {
                let nowTime = new Date().getTime();
                if (nowTime - lastTime >= waitTime) {
                    fn();//執行的時候註意this指向
                    lastTime = nowTime;
                }
            }
        }

防抖

函數防抖就是函數需要頻繁觸發情況時，只有足夠的空閑時間，才執行一次。就像公交司機會等人都上車後才出站

運用場景

• 實時搜索（keyup）
• 拖拽（mousemove）

    let antiShake = (fn,intervalTime) => {
        let timer = null;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn()
            },intervalTime)
        }
    }