JavaScript中防抖節流的案例分析

小編給大家分享一下JavaScript中防抖節流的案例分析，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

函數節流和函數防抖，兩者都是優化高頻率執行js代碼的一種手段。

函數節流（throttle）與 函數防抖（debounce）都是為了限制函數的執行頻次，以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

函數節流（throttle）

函數節流是指一定時間內執行的操作只執行一次，也就是說即預先設定一個執行周期，當調用動作的時刻大于等于執行周期則執行該動作，然后進入下一個新周期，一個比較形象的例子是如果將水龍頭擰緊直到水是以水滴的形式流出，那你會發現每隔一段時間，就會有一滴水流出。

function debounce(fn, wait) {   
    var timeout = null;   
    return function() {       
        if(timeout !== null) clearTimeout(timeout);       
        timeout = setTimeout(fn, wait);   
    }
}
// 處理函數
function handle() {   
    console.log(Math.random());
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

函數防抖（debounce）

函數防抖是指在一定時間內，在動作被連續頻繁觸發的情況下，動作只會被執行一次，也就是說當調用動作過n毫秒后，才會執行該動作，若在這n毫秒內又調用此動作則將重新計算執行時間，所以短時間內的連續動作永遠只會觸發一次，比如說用手指一直按住一個彈簧，它將不會彈起直到你松手為止。

時間戳

var throttle = function(func, delay) {           
    var prev = Date.now();           
    return function() {               
        var context = this;               
        var args = arguments;               
        var now = Date.now();               
        if (now - prev >= delay) {                   
            func.apply(context, args);                   
            prev = Date.now();               
        }           
    }       
}       
function handle() {           
    console.log(Math.random());       
}       
window.addEventListener('scroll', throttle(handle, 1000));

定時器

var throttle = function(func, delay) {
    var timer = null;
    return function() {
        var context = this;
        var args = arguments;
        if (!timer) {
            timer = setTimeout(function() {
                func.apply(context, args);
                timer = null;
            }, delay);
        }
    }
}
function handle() {
    console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

看完了這篇文章，相信你對JavaScript中防抖節流的案例分析有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！