在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法
網(wǎng)頁中JavaScript最基本的功能是監(jiān)聽或響應用戶的動作,這非常的有用。用戶的動作有些頻率非常高,有的十分罕見。有些監(jiān)聽器函數(shù)的執(zhí)行如閃電般完成,而有些繁重的會把瀏覽器拖死。拿瀏覽器窗口的resize事件來說,這種事件會在瀏覽器窗口大小的每一尺度變化都觸發(fā)一次,如果監(jiān)聽器體量很大,你的瀏覽器很快就會被拖垮。
很顯然,我們不能允許瀏覽器被拖垮,但我們又不能刪除刪除監(jiān)聽器。然而,我們可以限制函數(shù)調(diào)用的頻度,弱化事件函數(shù)運行帶來的影響。相對于讓窗口的每一步size的變化都觸發(fā)一次監(jiān)聽器函數(shù),我們可以現(xiàn)在監(jiān)聽函數(shù)的觸發(fā)的最小間隔必須大于多少毫秒,讓它保持著合理的調(diào)用頻道,確保不毀壞用戶體驗。有一個很好的js工具庫叫做Underscore.js,它里面有一個簡單的方法能讓你輕松的創(chuàng)建降低事件函數(shù)觸發(fā)頻度的監(jiān)聽器。
JavaScript代碼
降頻監(jiān)聽器的代碼很簡單:
// 創(chuàng)建監(jiān)聽器
var updateLayout = _.debounce(function(e) {
// Does all the layout updating here
}, 500); // 最低500毫秒運行一次
// Add the event listener
window.addEventListener("resize", updateLayout, false);
…這段Underscore.js代碼底層實際上是用interval檢查事件函數(shù)調(diào)用的頻度:
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
代碼并不是特別復雜,但用不著自己寫也是一種幸福。這個debounce函數(shù)并沒有依賴其他的Underscore.js函數(shù),所以,你可以把這個方法添加到你喜歡的js工具庫中,例如jQuery或MooTools,很容易:
// MooTools
Function.implement({
debounce: function(wait, immediate) {
var timeout,
func = this;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
});
// Use it!
window.addEvent("resize", myFn.debounce(500));
正如上面說的,窗口的resize事件是最常見的使用降頻操作的地方,還有一個常用的地方是,根據(jù)用戶的按鍵輸入給出自動補全提示。我非常喜歡收集這樣的代碼片段,它們能輕松的讓你的網(wǎng)站更高效。同時也推薦大家研究一下Underscore.js,里面提供了大量非常有用的函數(shù)。
相關文章
javascript設計模式 – 適配器模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 適配器模式,結合實例形式分析了javascript適配器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04JS中for,for...in,for...of和forEach的區(qū)別和用法實例
JS遍歷數(shù)組(循環(huán)數(shù)組)的方式有多種,可以使用傳統(tǒng)的for循環(huán),也可以使用升級版的for in循環(huán),還可以使用Array類型的forEach() 方法,這篇文章主要給大家介紹了關于JS中for、for...in、for...of和forEach的區(qū)別和用法的相關資料,需要的朋友可以參考下2021-11-11