JS防抖和節流

       一部分的用戶會有頻繁的觸發事件執行行爲（比如連續點擊，滑動滾動條等），這就很有可能導致界面卡頓，甚至瀏覽器的崩潰，防抖和節流就是來解決這種問題。

1、防抖

       觸發高頻事件後n秒（n爲自行設置）內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。注意，只有足夠空閒的時間，才執行一次

<div id="debounce" style="width: 100px;height: 100px;background-color: rebeccapurple;margin: 100px 300px;"></div>
<script>
    var db = document.getElementById("debounce");
    window.onload = function () {
        let obtn = document.getElementById('debounce'); //獲取按鈕
        obtn.addEventListener('click',debounceHandle(debounce),false); //監聽綁定事件
    }
    //防抖函數
    function debounceHandle (fn) {
        let timer = null;
        return function () {
            clearTimeout(timer); //如果存在事件就清除定時器
            timer = setTimeout(function(){ //如果不存在那麼就開啓定時器
            fn.call(this,arguments);
            },1000)
        }
        }
    //執行函數
    function debounce() {
    //   console.log('防抖，防抖，防抖');
            db.style.background= "red";
    }
 </script>

       根據以上代碼我們可以知道，在點擊div 1秒後，方塊會由紫色變爲紅色，如下圖①，因爲我們在代碼里加了防抖函數，所以即使在一秒內點擊多次，也不會出現紅色如下圖②：

       圖①

       圖②（從圖中箭頭輕微的抖動可看出，我確實一直在點擊，只到點擊最後一次鼠標離開方塊，方塊才變紅）

2、節流

       觸發高頻事件後n秒（n爲自行設置）內函數只會執行一次，函數節流就是預定一個函數只有在大於等於執行週期是才執行，週期內調用不執行，所以節流會稀釋函數的執行頻率。

       通俗點就是阻止一個函數在很短時間間隔內聯繫調用（比如安檢時，一定時間內，只允許一個乘客通過）。

       以下代碼可以同樣可以實現上述效果：

function throttle(fn,wtime){
    var timer = null;
    return function(){
        var context = this;
        var as = arguments;
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,as);
                timer = null;
            },wtime)
        }
    }
}  
function addEvent(){
   db.style.background= "red";
}  
window.addEventListener('click',throttle(addEvent,500));