成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何理解debounce和throttle?

CoderStudy / 2975人閱讀

摘要：前端工程師們都聽過看起來很高級的詞，節(jié)流和防抖，其實(shí)節(jié)流就是，防抖就是，其實(shí)這個(gè)也屬于前端性能優(yōu)化的一部分。具體就不寫了，因?yàn)槌Ｓ糜谶B續(xù)事件的事件處理函數(shù)?？梢詤⒖嘉恼伦詈蟮模渲械脑谏系倪\(yùn)用，就是的正確打開方式。

前端工程師們都聽過看起來很高級的詞，節(jié)流和防抖，其實(shí)節(jié)流就是debounce，防抖就是throttle，其實(shí)這個(gè)也屬于前端性能優(yōu)化的一部分。

在做遠(yuǎn)程搜索時(shí)，如果每輸入1個(gè)字就調(diào)用1次接口，就會頻繁查詢數(shù)據(jù)庫，假設(shè)我們的查詢是"一二三四五"，不考慮用戶輸入錯(cuò)誤的情況，至少會請求5次。

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

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

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

有，可以為函數(shù)設(shè)置一個(gè)setTimeout函數(shù)，相當(dāng)于定時(shí)調(diào)用接口，這種方法是低效的，也是非常愚蠢的，需要控制開關(guān)定時(shí)器，一旦搜索功能多了，就更蠢了。

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

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

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

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

vue項(xiàng)目中的lodash debounce demo

打印結(jié)果：
debounce wait時(shí)間為1000ms
觸發(fā)了input事件 13131
后端請求已完成！
耗時(shí)2000毫秒

在1000ms時(shí)間范圍內(nèi)觸發(fā)，僅僅調(diào)用一次remoteMethod，也就是僅僅調(diào)用一次后端接口，達(dá)到我們的預(yù)期效果。

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

在做滾動加載時(shí)，如果用戶滾動的幅度過大，會導(dǎo)致加載的內(nèi)容過多，相當(dāng)于水的流量沒有控制，一瞬間大量的水量迸發(fā)而出，從而所看到的延后好幾個(gè)與預(yù)期的下一個(gè)不符的情況

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

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

具體demo就不寫了，因?yàn)?strong>throttle常用于連續(xù)事件的事件處理函數(shù)。

可以參考 https://css-tricks.com/the-di... 文章最后的demo，其中的throttle在scroll上的運(yùn)用，就是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只有當(dāng)連續(xù)事件停止后的一小段時(shí)間后再觸發(fā)一次，連續(xù)事件結(jié)束后可能只觸發(fā)一次

throttle會在連續(xù)事件的過程中，每隔一段時(shí)間至少觸發(fā)一次，連續(xù)事件結(jié)束后觸發(fā)不止一次

努力成為一個(gè)不掉隊(duì)的前端工程師！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100870.html

相關(guān)文章

  • 淺談throttle以及debounce的原理和實(shí)現(xiàn)

    摘要：淺談以及的原理和實(shí)現(xiàn)背景日常開發(fā)中我們經(jīng)常會遇到一些需要節(jié)流調(diào)用或者壓縮調(diào)用次數(shù)的情況例如之前我在完成一個(gè)需求的時(shí)候就遇到了因?yàn)楹蠖瞬l(fā)問題導(dǎo)致收到多條信息從而導(dǎo)致函數(shù)被重復(fù)調(diào)用的情況當(dāng)時(shí)的做法是通過對函數(shù)的調(diào)用進(jìn)行注冊遇到多次調(diào)用的時(shí)候清 淺談throttle以及debounce的原理和實(shí)現(xiàn) 背景 日常開發(fā)中,我們經(jīng)常會遇到一些需要節(jié)流調(diào)用,或者壓縮調(diào)用次數(shù)的情況,例如之前我在完成...

    jsbintask 評論0 收藏0

  • 一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對學(xué)術(shù)界拿來主義的思考

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

    Lionad-Morotar 評論0 收藏0

  • throttle與debounce的區(qū)別

    摘要：自己嘗試一下年在的文章中第一次看到的實(shí)現(xiàn)方法。這三種實(shí)現(xiàn)方法內(nèi)部不同，但是接口幾乎一致。如你所見，我們使用了參數(shù)，因?yàn)槲覀冎粚τ脩敉Ｖ垢淖優(yōu)g覽器大小時(shí)最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對學(xué)術(shù)界拿來主義的思考》具體文章詳見，微信公眾號：showImg(https://segmentfault.com/img/b...

    Pluser 評論0 收藏0

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

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

    keke 評論0 收藏0

發(fā)表評論

0條評論

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