// 當頁面發生滾動的時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));
掘金-7分鐘理解js的節流、防抖及使用場景// 3. 時間戳+定時器 第一次會立即執行,最後一次會延遲執行
var throttle = function(func, delay) else
}}
節流好理解
防抖和節流的實現
常見的滾動監聽事件,每次滾動都會觸發,如此太過浪費效能,要如何優化呢?思路 在第一次觸發事件的時候,不是立即執行函式,而是給出乙個delay時間值,例如200ms 效果 短時間內大量出發同一事件最終只會執行一次 實現 利用settimeout來實現計時器的功能 防抖 const debounce f...
實現防抖節流
防抖 debounce 不管事件觸發頻率多高,一定在事件觸發n秒後才執行,如果你在乙個事件觸發的 n 秒內又觸發了這個事件,就以新的事件的時間為準,n秒後才執行,總之,觸發完事件 n 秒內不再觸發事件,n秒後再執行。直接上 例如頁面視窗一直在改變 停止的是n秒後執行事件 window.onload ...
防抖和節流 什麼是防抖和節流
目錄二 節流 有這樣一種情況,想象有乙個表單,點選提交按鈕就傳送請求給伺服器。如果使用者在很短的時間間隔內 手抖 點選了多次,又或者是惡意點選,那麼就將傳送多個請求。該行為將造成伺服器額外的不必要負載。所謂防抖,實際上就是是處理這種常見的情況的描述。submit該段 當點選submit按鈕的時候,將...