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中防抖節流的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！