在JavaScript里防止事件函數(shù)高頻觸發(fā)和高頻調(diào)用的方法
網(wǎng)頁(yè)中JavaScript最基本的功能是監(jiān)聽或響應(yīng)用戶的動(dòng)作，這非常的有用。用戶的動(dòng)作有些頻率非常高，有的十分罕見。有些監(jiān)聽器函數(shù)的執(zhí)行如閃電般完成，而有些繁重的會(huì)把瀏覽器拖死。拿瀏覽器窗口的resize事件來(lái)說(shuō)，這種事件會(huì)在瀏覽器窗口大小的每一尺度變化都觸發(fā)一次，如果監(jiān)聽器體量很大，你的瀏覽器很快就會(huì)被拖垮。
很顯然，我們不能允許瀏覽器被拖垮，但我們又不能刪除刪除監(jiān)聽器。然而，我們可以限制函數(shù)調(diào)用的頻度，弱化事件函數(shù)運(yùn)行帶來(lái)的影響。相對(duì)于讓窗口的每一步size的變化都觸發(fā)一次監(jiān)聽器函數(shù)，我們可以現(xiàn)在監(jiān)聽函數(shù)的觸發(fā)的最小間隔必須大于多少毫秒，讓它保持著合理的調(diào)用頻道，確保不毀壞用戶體驗(yàn)。有一個(gè)很好的js工具庫(kù)叫做Underscore.js，它里面有一個(gè)簡(jiǎn)單的方法能讓你輕松的創(chuàng)建降低事件函數(shù)觸發(fā)頻度的監(jiān)聽器。
JavaScript代碼
降頻監(jiān)聽器的代碼很簡(jiǎn)單：
// 創(chuàng)建監(jiān)聽器
var updateLayout = _.debounce(function(e) {
// Does all the layout updating here
}, 500); // 最低500毫秒運(yùn)行一次
// Add the event listener
window.addEventListener("resize", updateLayout, false);
…這段Underscore.js代碼底層實(shí)際上是用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);
};
};
代碼并不是特別復(fù)雜，但用不著自己寫也是一種幸福。這個(gè)debounce函數(shù)并沒(méi)有依賴其他的Underscore.js函數(shù)，所以，你可以把這個(gè)方法添加到你喜歡的js工具庫(kù)中，例如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));
正如上面說(shuō)的，窗口的resize事件是最常見的使用降頻操作的地方，還有一個(gè)常用的地方是，根據(jù)用戶的按鍵輸入給出自動(dòng)補(bǔ)全提示。我非常喜歡收集這樣的代碼片段，它們能輕松的讓你的網(wǎng)站更高效。同時(shí)也推薦大家研究一下Underscore.js，里面提供了大量非常有用的函數(shù)。
相關(guān)文章
js關(guān)于getImageData跨域問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了js關(guān)于getImageData跨域問(wèn)題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
利用JS自動(dòng)打開頁(yè)面上鏈接的實(shí)現(xiàn)代碼
今天經(jīng)過(guò)測(cè)試，實(shí)現(xiàn)了利用JS來(lái)自動(dòng)打開頁(yè)面上的鏈接的功能，其實(shí)比較簡(jiǎn)單，就是在頁(yè)面上把鏈接列表列出來(lái)，然后通過(guò)JQuery的相關(guān)控制，在框架頁(yè)中把鏈接打開，具體能做什么用，大家自己想，哈哈。2011-09-09
JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加Form表單元素的方法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)添加Form表單元素的方法,結(jié)合實(shí)例形式分析了javascript表單元素操作相關(guān)函數(shù)使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-08-08
JavaScript初學(xué)者應(yīng)注意的七個(gè)細(xì)節(jié)小結(jié)
每種語(yǔ)言都有它特別的地方，對(duì)于JavaScript來(lái)說(shuō)，使用var就可以聲明任意類型的變量，這門腳本語(yǔ)言看起來(lái)很簡(jiǎn)單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗(yàn)的2012-01-01
JS查找字符串中出現(xiàn)最多的字符及個(gè)數(shù)統(tǒng)計(jì)
最近在項(xiàng)目中遇到這樣的需求：求字符串'nininihaoa'中出現(xiàn)次數(shù)最多字符。怎么實(shí)現(xiàn)呢？下面小編給大家分享具體實(shí)現(xiàn)代碼，需要的朋友參考下吧2017-02-02
如何用JS獲取帶“\”字符串的中間值？...2007-02-02
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手機(jī)拍照上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
推薦三款日期選擇插件(My97DatePicker、jquery.datepicker、Mobiscroll)
這篇文章主要介紹了推薦三款日期選擇插件，My97DatePicker、用于PC端的jquery.datepicker，以及專注于移動(dòng)端的Mobiscroll，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
OpenLayers3實(shí)現(xiàn)圖層控件功能
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)圖層控件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
innerHTML，outerHTML,innerTEXT三者之間的區(qū)別
innerHTML，outerHTML,innerTEXT三者之間的區(qū)別...2007-01-01