資訊專欄INFORMATION COLUMN
摘要：函數(shù)防抖就是讓某個(gè)函數(shù)在上一次執(zhí)行后，滿足等待某個(gè)時(shí)間內(nèi)不再觸發(fā)此函數(shù)后再執(zhí)行，而在這個(gè)等待時(shí)間內(nèi)再次觸發(fā)此函數(shù)，等待時(shí)間會(huì)重新計(jì)算。
underscore.js提供了很多很有用的函數(shù)，今天想說說其中的兩個(gè)。這兩個(gè)函數(shù)都用于限制函數(shù)的執(zhí)行。
debounce在解釋這個(gè)函數(shù)前，我們先從一個(gè)例子看下這個(gè)函數(shù)的使用場(chǎng)景。假設(shè)我們網(wǎng)站有個(gè)搜索框，用戶輸入文本我們會(huì)自動(dòng)聯(lián)想匹配出一些結(jié)果供用戶選擇。我們可能首先想到的做法就是監(jiān)聽keypress事件，然后異步去查詢結(jié)果。這個(gè)方法本身是沒錯(cuò)的，但是如果用戶快速的輸入了一連串的字符，假設(shè)是10個(gè)字符，那么就會(huì)在瞬間觸發(fā)了10次的請(qǐng)求，這無疑不是我們想要的。我們想要的是用戶停止輸入的時(shí)候才去觸發(fā)查詢的請(qǐng)求，這時(shí)候函數(shù)防抖可以幫到我們。
函數(shù)防抖就是讓某個(gè)函數(shù)在上一次執(zhí)行后，滿足等待某個(gè)時(shí)間內(nèi)不再觸發(fā)此函數(shù)后再執(zhí)行，而在這個(gè)等待時(shí)間內(nèi)再次觸發(fā)此函數(shù)，等待時(shí)間會(huì)重新計(jì)算。
我們先看下underscore.js里相關(guān)函數(shù)的定義：
_.debounce(function, wait, [immediate])
javascript// 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, args, context, timestamp, result;
var later = function() {
var last = _.now() - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = _.now();
var callNow = immediate && !timeout;
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
參數(shù)function是需要進(jìn)行函數(shù)防抖的函數(shù)；參數(shù)wait則是需要等待的時(shí)間，單位為毫秒；immediate參數(shù)如果為true，則debounce函數(shù)會(huì)在調(diào)用時(shí)立刻執(zhí)行一次function，而不需要等到wait這個(gè)時(shí)間后，例如防止點(diǎn)擊提交按鈕時(shí)的多次點(diǎn)擊就可以使用這個(gè)參數(shù)。
所以，上面那個(gè)場(chǎng)景，我們可以這么解決：
javascriptfunction query() {
//進(jìn)行異步調(diào)用查詢
}
var lazyQuery = _.debounce(query, 300);
$("#search").keypress(lazyQuery);
throttle
我們網(wǎng)站經(jīng)常會(huì)有這樣的需求，就是滾動(dòng)瀏覽器滾動(dòng)條的時(shí)候，更新頁面上的某些布局內(nèi)容或者去調(diào)用后臺(tái)的某接口查詢內(nèi)容。同樣的，如果不對(duì)函數(shù)調(diào)用的頻率加以限制的話，那么可能我們滾動(dòng)一次滾動(dòng)條就會(huì)產(chǎn)生N次的調(diào)用了。但是這次的情況跟上面的有所不同，我們不是要在每完成等待某個(gè)時(shí)間后去執(zhí)行某函數(shù)，而是要每間隔某個(gè)時(shí)間去執(zhí)行某函數(shù)，避免函數(shù)的過多執(zhí)行，這個(gè)方式就叫函數(shù)節(jié)流。
同樣的，我們看下underscore.js里相關(guān)函數(shù)的定義：
_.throttle(function, wait, [options])
javascript// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you"d like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
_.throttle = function(func, wait, options) {
var context, args, result;
var timeout = null;
var previous = 0;
if (!options) options = {};
var later = function() {
previous = options.leading === false ? 0 : _.now();
timeout = null;
result = func.apply(context, args);
if (!timeout) context = args = null;
};
return function() {
var now = _.now();
if (!previous && options.leading === false) previous = now;
var remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
result = func.apply(context, args);
if (!timeout) context = args = null;
} else if (!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaining);
}
return result;
};
};
參數(shù)function是需要進(jìn)行函數(shù)節(jié)流的函數(shù)；參數(shù)wait則是函數(shù)執(zhí)行的時(shí)間間隔，單位是毫秒。option有兩個(gè)選項(xiàng)，throttle第一次調(diào)用時(shí)默認(rèn)會(huì)立刻執(zhí)行一次function，如果傳入{leading: false}，則第一次調(diào)用時(shí)不執(zhí)行function。{trailing: false}參數(shù)則表示禁止最后那一次延遲的調(diào)用。具體可以看源碼進(jìn)行理解。
所以，在滾動(dòng)滾動(dòng)條的場(chǎng)景，我們可以這么做：
javascriptfunction handleScroll() {
//進(jìn)行滾動(dòng)時(shí)的相關(guān)處理
}
var throttled = _.throttle(handleScroll, 100);
$(window).scroll(throttled);
參考
http://underscorejs.org/#debounce
http://underscorejs.org/#throttle
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85683.html
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...
摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內(nèi)容就告一段落啦，感各位能耐心看到這里。 前言 陸游有一首《冬夜讀書示子聿》——古人學(xué)問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學(xué)習(xí)或工作中，不斷的印證著這首詩的內(nèi)涵。所以，又有了此篇小菊花文章。 詳解 在前端開發(fā)中，我們經(jīng)常會(huì)碰到一些會(huì)持...
摘要：函數(shù)防抖簡(jiǎn)單實(shí)現(xiàn)模擬請(qǐng)求獲取函數(shù)的作用域和變量清除定時(shí)器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時(shí)間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會(huì)保證在規(guī)定時(shí)間內(nèi)一定會(huì)執(zhí)行一次真正的事件處理函數(shù)。 防抖（debounce） 名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。 使用場(chǎng)景：以百度輸入框例，比如你要查詢...
摘要：封裝方法也比較簡(jiǎn)單，書中對(duì)此問題也進(jìn)行了處理使用定時(shí)器，讓函數(shù)延遲秒后執(zhí)行，在此秒內(nèi)，然后函數(shù)再次被調(diào)用，則刪除上次的定時(shí)器，取消上次調(diào)用的隊(duì)列任務(wù)，重新設(shè)置定時(shí)器。 在實(shí)際開發(fā)中，函數(shù)一定是最實(shí)用最頻繁的一部分，無論是以函數(shù)為核心的函數(shù)式編程，還是更多人選擇的面向?qū)ο笫降木幊?，都?huì)有函數(shù)的身影，所以對(duì)函數(shù)進(jìn)行深入的研究是非常有必要的。 函數(shù)節(jié)流 比較直白的說，函數(shù)節(jié)流就是強(qiáng)制規(guī)定一...
摘要：隆重請(qǐng)出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時(shí)間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過時(shí)間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來實(shí)現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場(chǎng)景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...
摘要：防抖與節(jié)流源碼學(xué)習(xí)最近自己擼了一個(gè)輪播圖，在點(diǎn)擊切換的時(shí)候，為了尋求更好的用戶體驗(yàn)，引入了節(jié)流，在此記錄對(duì)源碼的學(xué)習(xí)過程源碼來源防抖函數(shù)防抖使用場(chǎng)景現(xiàn)在我們需要做一個(gè)搜索框，當(dāng)用戶輸入文字，執(zhí)行事件的時(shí)候，需要發(fā)出異步請(qǐng)求去進(jìn)行結(jié)果查詢。 防抖與節(jié)流（源碼學(xué)習(xí)） 最近自己擼了一個(gè)輪播圖，在點(diǎn)擊切換的時(shí)候，為了尋求更好的用戶體驗(yàn)，引入了節(jié)流，在此記錄對(duì)源碼的學(xué)習(xí)過程源碼來源：unders...
閱讀 736·2021-08-17 10:11
閱讀 1600·2019-08-30 11:15
閱讀 1025·2019-08-26 13:54
閱讀 3511·2019-08-26 11:47
閱讀 1224·2019-08-26 10:20
閱讀 2823·2019-08-23 18:35
閱讀 1219·2019-08-23 17:52
閱讀 1300·2019-08-23 16:19
