防抖和節流的實現

// 當頁面發生滾動的時1s後執行函式

var timer = null;
window.addeventlistener('scroll', function() , 1000)
});// 把函式抽出來
var timeout = null;
function debounce() , 1000)
}window.addeventlistener('scroll', debounce);
// 消除全域性變數timeout
function debounce(fn, delay) 
}function aa()
window.addeventlistener('scroll', debounce(aa, 1000));
// 消除區域性變數timeout
function debounce(fun, delay) , delay)
}} window.addeventlistener('scroll', debounce(aa, 1000));
// es6語法 減少區域性變數
function debounce(fun, delay) , delay)
}} window.addeventlistener('scroll', debounce(aa, 1000));

//模擬一段ajax請求

function ajax(content) 
function debounce(fun, delay) , delay)
}} 
let inputb = document.getelementbyid('debounce')
// 變數賦值
let debounceajax = debounce(ajax, 500)
inputb.addeventlistener('keyup', function (e) )

// 1. 時間戳的方式  特點：第一次觸發 立即執行

var throttle = function(func, delay) }}
function aa() 
window.addeventlistener('scroll', throttle(aa, 1000));

// 2. 定時器方式 特點：第一次不會立即執行，最後一次會延遲執行

var throttle = function(func, delay) , delay);
} }}function aa() 
window.addeventlistener('scroll', throttle(aa, 1000));

// 3. 時間戳+定時器  第一次會立即執行，最後一次會延遲執行

var throttle = function(func, delay) else 
}}

節流好理解

防抖和節流的實現

常見的滾動監聽事件，每次滾動都會觸發，如此太過浪費效能，要如何優化呢？思路 在第一次觸發事件的時候，不是立即執行函式，而是給出乙個delay時間值，例如200ms 效果 短時間內大量出發同一事件最終只會執行一次 實現 利用settimeout來實現計時器的功能 防抖 const debounce f...

實現防抖節流

防抖 debounce 不管事件觸發頻率多高，一定在事件觸發n秒後才執行，如果你在乙個事件觸發的 n 秒內又觸發了這個事件，就以新的事件的時間為準，n秒後才執行，總之，觸發完事件 n 秒內不再觸發事件，n秒後再執行。直接上 例如頁面視窗一直在改變 停止的是n秒後執行事件 window.onload ...

防抖和節流 什麼是防抖和節流

目錄二 節流 有這樣一種情況，想象有乙個表單，點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次，又或者是惡意點選，那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖，實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候，將...