函數防抖與函數節流

用戶行爲會頻繁的觸發事件執行，對於DOM操做、資源加載等耗費性能的處理，極可能致使界面卡頓，甚至瀏覽器的崩潰。函數節流(throttle)和函數防抖(debounce)就是爲了解決相似需求應運而生的。

函數防抖

規定函數至少間隔多久執行。

• 函數執行過一次後，在n秒內不能再次執行，不然推遲函數執行
• 下一次函數調用將清除上一次的定時器，並用setTimeout從新計時

function debounce(method, delay){
    var timer = null;
    return function(){
        var context = this,args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            method.apply(context, args);
        },delay);
    }
}

document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);複製代碼

函數節流

規定函數在某時間段內最多執行一次

• 函數在n秒內最多執行一次
• 下一次函數調用將清除上一次的定時器
• 若函數執行的時間間隔小於等於規定時間間隔則用setTimeout在規定時間後再執行
• 若函數執行的時間間隔大於規定時間間隔則執行函數，並從新計時

function throttle(method, delay){
    var last = 0;
    return function (){
        var now = +new Date();
        if(now - last > delay){
            method.apply(this,arguments);
            last = now;
        }
    }
}

document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);複製代碼

區別

函數節流：是確保函數特定的時間內至多執行一次。
函數防抖：是函數在特定的時間內不被再調用後執行。

https://blog.csdn.net/qq_37860930/article/details/83505547

https://juejin.im/post/5b651dc15188251aa30c8669