国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何理解debounce和throttle?

CoderStudy / 2956人閱讀

摘要：前端工程師們都聽過看起來很高級的詞，節流和防抖，其實節流就是，防抖就是，其實這個也屬于前端性能優化的一部分。具體就不寫了，因為常用于連續事件的事件處理函數。可以參考文章最后的，其中的在上的運用，就是的正確打開方式。

前端工程師們都聽過看起來很高級的詞，節流和防抖，其實節流就是debounce，防抖就是throttle，其實這個也屬于前端性能優化的一部分。

在做遠程搜索時，如果每輸入1個字就調用1次接口，就會頻繁查詢數據庫，假設我們的查詢是"一二三四五"，不考慮用戶輸入錯誤的情況，至少會請求5次。

有沒有一種方法，可以隔個幾百毫秒再去查詢呢？

有沒有更加高級的做法，用戶輸入完成后，停頓了幾百毫秒再去查詢呢？

有沒有一種方法，可以隔個幾百毫秒再去查詢呢？

有，可以為函數設置一個setTimeout函數，相當于定時調用接口，這種方法是低效的，也是非常愚蠢的，需要控制開關定時器，一旦搜索功能多了，就更蠢了。

有沒有更加高級的做法，用戶輸入完成后，停頓了幾百毫秒再去查詢呢？

有，debounce就是做這個事情的，lodash從0.1.0就支持了這個方法。

css-tricks的lodash debounce demo 
// 被debounce的函數，http請求，事件處理函數等等
function make_ajax_request(){
    // 這是一個調用后端api的方法
}
// 監聽事件并且調用lodash的debounce方法
$(".autocomplete").on("keydown",
     _.debounce(make_ajax_request, 1300));
});

demo地址：https://codepen.io/dcorb/embe...

vue項目中的lodash debounce demo

打印結果：
debounce wait時間為1000ms
觸發了input事件 13131
后端請求已完成！
耗時2000毫秒

在1000ms時間范圍內觸發，僅僅調用一次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

在做滾動加載時，如果用戶滾動的幅度過大，會導致加載的內容過多，相當于水的流量沒有控制，一瞬間大量的水量迸發而出，從而所看到的延后好幾個與預期的下一個不符的情況

當水流超過閥值時，最多釋放出閥值量的水；水流小于閥值時，一切正常。有沒有一種辦法去控制水流的大小？

有，throttle就是做這個事情的，lodash從0.1.0也支持了這個方法。

具體demo就不寫了，因為throttle常用于連續事件的事件處理函數。

可以參考 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上連續觸發mousemove事件我們發現：

debounce只有當連續事件停止后的一小段時間后再觸發一次，連續事件結束后可能只觸發一次

throttle會在連續事件的過程中，每隔一段時間至少觸發一次，連續事件結束后觸發不止一次

努力成為一個不掉隊的前端工程師！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100870.html

相關文章

  • 淺談throttle以及debounce的原理和實現

    摘要：淺談以及的原理和實現背景日常開發中我們經常會遇到一些需要節流調用或者壓縮調用次數的情況例如之前我在完成一個需求的時候就遇到了因為后端并發問題導致收到多條信息從而導致函數被重復調用的情況當時的做法是通過對函數的調用進行注冊遇到多次調用的時候清 淺談throttle以及debounce的原理和實現 背景 日常開發中,我們經常會遇到一些需要節流調用,或者壓縮調用次數的情況,例如之前我在完成...

    jsbintask 評論0 收藏0

  • 一次發現underscore源碼bug的經歷以及對學術界拿來主義的思考

    摘要：事情是如何發生的最近干了件事情，發現了源碼的一個。樓主找到的關于和區別的資料如下關于拿來主義為什么這么多文章里會出現澤卡斯的錯誤代碼樓主想到了一個詞，叫做拿來主義。的文章，就深刻抨擊了拿來主義這一現象。 事情是如何發生的 最近干了件事情，發現了 underscore 源碼的一個 bug。這件事本身并沒有什么可說的，但是過程值得我們深思，記錄如下，各位看官仁者見仁智者見智。 平時有瀏覽別...

    Lionad-Morotar 評論0 收藏0

  • throttle與debounce的區別

    摘要：自己嘗試一下年在的文章中第一次看到的實現方法。這三種實現方法內部不同，但是接口幾乎一致。如你所見，我們使用了參數，因為我們只對用戶停止改變瀏覽器大小時最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號里也分享了《一次發現underscore源碼bug的經歷以及對學術界拿來主義的思考》具體文章詳見，微信公眾號：showImg(https://segmentfault.com/img/b...

    Pluser 評論0 收藏0

  • 探究防抖(debounce)和節流(throttle)

    摘要：如果使用的是防抖，那么得等我們停止滾動之后一段時間才會加載新的內容，沒有那種無限滾動的流暢感。這時候，我們就可以使用節流，將事件有效觸發的頻率降低的同時給用戶流暢的瀏覽體驗。調用，瀏覽器會在下次刷新的時候執行指定回調函數。 本文來自我的博客，歡迎大家去GitHub上star我的博客 本文從防抖和節流出發，分析它們的特性，并拓展一種特殊的節流方式requestAnimationFrame...

    keke 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<