資訊專欄INFORMATION COLUMN
摘要：前端工程師們都聽過看起來很高級的詞，節(jié)流和防抖，其實節(jié)流就是，防抖就是，其實這個也屬于前端性能優(yōu)化的一部分。具體就不寫了，因為常用于連續(xù)事件的事件處理函數(shù)?？梢詤⒖嘉恼伦詈蟮模渲械脑谏系倪\用，就是的正確打開方式。
前端工程師們都聽過看起來很高級的詞，節(jié)流和防抖，其實節(jié)流就是debounce，防抖就是throttle，其實這個也屬于前端性能優(yōu)化的一部分。
在做遠程搜索時，如果每輸入1個字就調用1次接口，就會頻繁查詢數(shù)據(jù)庫，假設我們的查詢是"一二三四五"，不考慮用戶輸入錯誤的情況，至少會請求5次。
有沒有一種方法，可以隔個幾百毫秒再去查詢呢？
有沒有更加高級的做法，用戶輸入完成后，停頓了幾百毫秒再去查詢呢？
有沒有一種方法，可以隔個幾百毫秒再去查詢呢？有，可以為函數(shù)設置一個setTimeout函數(shù)，相當于定時調用接口，這種方法是低效的，也是非常愚蠢的，需要控制開關定時器，一旦搜索功能多了，就更蠢了。
有沒有更加高級的做法，用戶輸入完成后，停頓了幾百毫秒再去查詢呢？有，debounce就是做這個事情的，lodash從0.1.0就支持了這個方法。
css-tricks的lodash debounce demo// 被debounce的函數(shù)，http請求，事件處理函數(shù)等等
function make_ajax_request(){
// 這是一個調用后端api的方法
}
// 監(jiān)聽事件并且調用lodash的debounce方法
$(".autocomplete").on("keydown",
_.debounce(make_ajax_request, 1300));
});
demo地址：https://codepen.io/dcorb/embe...
vue項目中的lodash debounce demo打印結果：
debounce wait時間為1000ms
觸發(fā)了input事件 13131
后端請求已完成！
耗時2000毫秒
在1000ms時間范圍內觸發(fā)，僅僅調用一次remoteMethod，也就是僅僅調用一次后端接口，達到我們的預期效果。
debounce適用場景Debouncing a input event handler （this example explain this use case）
Debouncing a resize event handler
Debouncing a save function in an autosave feature
在做滾動加載時，如果用戶滾動的幅度過大，會導致加載的內容過多，相當于水的流量沒有控制，一瞬間大量的水量迸發(fā)而出，從而所看到的延后好幾個與預期的下一個不符的情況
當水流超過閥值時，最多釋放出閥值量的水；水流小于閥值時，一切正常。有沒有一種辦法去控制水流的大小？
有，throttle就是做這個事情的，lodash從0.1.0也支持了這個方法。
具體demo就不寫了，因為throttle常用于連續(xù)事件的事件處理函數(shù)。
可以參考 https://css-tricks.com/the-di... 文章最后的demo，其中的throttle在scroll上的運用，就是throttle的正確打開方式。
throttle適用場景Throttling a scroll event in infinite scroll（demo case）
Throttling a mousemove/touchmove event handler in canvas
debounce和throttle的對比地址：http://demo.nimius.net/deboun...
圖片：
通過在canvas上連續(xù)觸發(fā)mousemove事件我們發(fā)現(xiàn)：
debounce只有當連續(xù)事件停止后的一小段時間后再觸發(fā)一次，連續(xù)事件結束后可能只觸發(fā)一次
throttle會在連續(xù)事件的過程中，每隔一段時間至少觸發(fā)一次，連續(xù)事件結束后觸發(fā)不止一次
努力成為一個不掉隊的前端工程師！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/100870.html
摘要：淺談以及的原理和實現(xiàn)背景日常開發(fā)中我們經常會遇到一些需要節(jié)流調用或者壓縮調用次數(shù)的情況例如之前我在完成一個需求的時候就遇到了因為后端并發(fā)問題導致收到多條信息從而導致函數(shù)被重復調用的情況當時的做法是通過對函數(shù)的調用進行注冊遇到多次調用的時候清 淺談throttle以及debounce的原理和實現(xiàn) 背景 日常開發(fā)中,我們經常會遇到一些需要節(jié)流調用,或者壓縮調用次數(shù)的情況,例如之前我在完成...
摘要：事情是如何發(fā)生的最近干了件事情，發(fā)現(xiàn)了源碼的一個。樓主找到的關于和區(qū)別的資料如下關于拿來主義為什么這么多文章里會出現(xiàn)澤卡斯的錯誤代碼樓主想到了一個詞，叫做拿來主義。的文章，就深刻抨擊了拿來主義這一現(xiàn)象。 事情是如何發(fā)生的 最近干了件事情，發(fā)現(xiàn)了 underscore 源碼的一個 bug。這件事本身并沒有什么可說的，但是過程值得我們深思，記錄如下，各位看官仁者見仁智者見智。 平時有瀏覽別...
摘要：自己嘗試一下年在的文章中第一次看到的實現(xiàn)方法。這三種實現(xiàn)方法內部不同，但是接口幾乎一致。如你所見，我們使用了參數(shù)，因為我們只對用戶停止改變?yōu)g覽器大小時最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經歷以及對學術界拿來主義的思考》具體文章詳見，微信公眾號：showImg(https://segmentfault.com/img/b...
摘要：如果使用的是防抖，那么得等我們停止?jié)L動之后一段時間才會加載新的內容，沒有那種無限滾動的流暢感。這時候，我們就可以使用節(jié)流，將事件有效觸發(fā)的頻率降低的同時給用戶流暢的瀏覽體驗。調用，瀏覽器會在下次刷新的時候執(zhí)行指定回調函數(shù)。 本文來自我的博客，歡迎大家去GitHub上star我的博客 本文從防抖和節(jié)流出發(fā)，分析它們的特性，并拓展一種特殊的節(jié)流方式requestAnimationFrame...
閱讀 1346·2021-10-18 13:32
閱讀 2512·2021-09-24 09:47
閱讀 1401·2021-09-23 11:22
閱讀 2526·2019-08-30 14:06
閱讀 661·2019-08-30 12:48
閱讀 2071·2019-08-30 11:03
閱讀 604·2019-08-29 17:09
閱讀 2544·2019-08-29 14:10
