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

資訊專欄INFORMATION COLUMN

JavaScript 函數(shù)節(jié)流 throttle 和防抖 debounce

mmy123456 / 1246人閱讀

摘要:今天和別人聊到函數(shù)的節(jié)流和防抖,發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊,遂小小實踐一下,在此記錄,希望對需要的人有所幫助。防抖實現(xiàn)順利,但是兩個節(jié)流方法的執(zhí)行結(jié)果存在差異。

今天和別人聊到JavaScript函數(shù)的節(jié)流和防抖,發(fā)現(xiàn)自己對這兩個的區(qū)別很是模糊,遂小小實踐一下,在此記錄,希望對需要的人有所幫助。

節(jié)流 - 頻繁操作,間隔一定時間去做一件事

舉例說明:假定時間間隔為 500ms,頻繁不停的操作 2s,且每兩次執(zhí)行時間小于等于時間間隔 500ms,那么就會執(zhí)行 4 次,也就是每隔 時間間隔 500ms 執(zhí)行一次。

防抖 - 頻繁操作,一定時間間隔內(nèi)只執(zhí)行最后一次操作

舉例說明:假定時間間隔是 500ms,頻繁不停的操作 5s,且每兩次執(zhí)行時間小于等于時間間隔 500ms,那么最后只執(zhí)行了 1 次,也就是每一次執(zhí)行時都結(jié)束了上一次的執(zhí)行。

代碼示例

</>復(fù)制代碼

  1. //節(jié)流方法 1
  2. function throttle1(method, duration){
  3. var prevTime = new Date();
  4. return function () {
  5. var context = this,
  6. currentTime = new Date(),
  7. resTime = currentTime - prevTime;
  8. //打印出本次調(diào)用方法和上次執(zhí)行方法的時間差
  9. console.log("時間差"+resTime);
  10. //當(dāng)本次調(diào)用距離上次執(zhí)行方法的時間差大于等于要求時間間隔時,執(zhí)行一次方法
  11. if(resTime >= duration){
  12. method.apply(context);
  13. //記錄執(zhí)行方法的時間
  14. prevTime = currentTime;
  15. }
  16. }
  17. }
  18. //節(jié)流方法 2
  19. function throttle2(method, duration){
  20. //當(dāng)前時間間隔內(nèi)是否有方法在執(zhí)行(或者說方法的調(diào)用是否在進(jìn)行)
  21. var runningFlag = false;
  22. return function (e) {
  23. // 判斷當(dāng)前是否有方法在執(zhí)行,有,則什么都不做
  24. if (runningFlag) {
  25. return false;
  26. }
  27. //開始執(zhí)行
  28. runningFlag = true;
  29. setTimeout(function(){
  30. method(e);
  31. //執(zhí)行完畢,聲明當(dāng)前沒有正在執(zhí)行的方法,方便下一個時間間隔內(nèi)的調(diào)用
  32. runningFlag = false;
  33. }, duration)
  34. }
  35. }
  36. //防抖
  37. function debounce(method, duration){
  38. var timer = null;
  39. return function(){
  40. var context = this,
  41. args = arguments;
  42. //在本次調(diào)用之前的一個間隔時間內(nèi),有方法在執(zhí)行,則終止該方法的執(zhí)行
  43. if(timer){
  44. clearTimeout(timer);
  45. }
  46. //開始執(zhí)行本次調(diào)用
  47. timer = setTimeout(function(){
  48. method.apply(context, args);
  49. },duration);
  50. }
  51. }
  52. //模擬三個執(zhí)行方法
  53. function jieliu1(){
  54. console.log("節(jié)流 1");
  55. }
  56. function jieliu2(){
  57. console.log("節(jié)流 2");
  58. }
  59. function fangdou(){
  60. console.log("防抖");
  61. }
  62. //持續(xù)執(zhí)行時間
  63. var totalTime = 2000;
  64. var jieliuFn1 = throttle1(jieliu1,500);
  65. var jieliuFn2 = throttle2(jieliu2,500);
  66. var fangdouFn = debounce(fangdou,500);
  67. (function(duration){
  68. setInterval(function(){
  69. if( totalTime > 0 ){
  70. jieliuFn1();
  71. jieliuFn2();
  72. fangdouFn();
  73. totalTime -= duration;
  74. }
  75. },duration);
  76. })(100);
運(yùn)行結(jié)果

</>復(fù)制代碼

  1. 時間差 100
    時間差 201
    時間差 303
    時間差 401
    時間差 504
    節(jié)流 1
    時間差 98
    節(jié)流 2
    時間差 199
    時間差 300
    時間差 396
    時間差 496
    時間差 597
    節(jié)流 1
    時間差 100
    節(jié)流 2
    時間差 203
    時間差 299
    時間差 402
    時間差 500
    節(jié)流 1
    時間差 103
    時間差 204
    節(jié)流 2
    時間差 303
    時間差 400
    節(jié)流 2
    防抖
結(jié)論

由以上運(yùn)行結(jié)果可以看出,節(jié)流1 出現(xiàn)了 3 次,節(jié)流2 出現(xiàn)了 4 次,防抖出現(xiàn)了 1 次。防抖實現(xiàn)順利,但是兩個節(jié)流方法的執(zhí)行結(jié)果存在差異。
觀察時間差可以看出,每次節(jié)流1 執(zhí)行時,時間差并不會都是 500 整,也就是說,一共調(diào)用 2 秒時,節(jié)流1 并不能做到每隔 500 毫秒執(zhí)行一次而共執(zhí)行 4 次,第四次執(zhí)行往往因為前面的 3 次執(zhí)行的時間誤差,而導(dǎo)致到達(dá)時間 2 秒時,最后一次的時間差無法達(dá)到 時間間隔 500ms 以上,以至于只能執(zhí)行 3 次。

結(jié)論:當(dāng)在一個大范圍的時間內(nèi),比如兩小時內(nèi),每幾分鐘執(zhí)行一次,超過2小時則不再實行,推薦使用第一種節(jié)流方式,;如果僅僅要求間隔一定時間執(zhí)行一次,推薦使用第二種節(jié)流方法;防止頻繁操作,比如表單多次提交,推薦使用防抖。

如有問題,歡迎指正,謝謝!

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

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93789.html

相關(guān)文章

  • 關(guān)于js節(jié)流函數(shù)throttle防抖debounce

    摘要:主要實現(xiàn)在于通過異步操作的事件間隔,對于前后兩次調(diào)用方法打時間進(jìn)行比較,用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說,直奔主題。 什么是throttle和debounce? 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說,沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    張紅新 評論0 收藏0
  • 關(guān)于js節(jié)流函數(shù)throttle防抖debounce

    摘要:主要實現(xiàn)在于通過異步操作的事件間隔,對于前后兩次調(diào)用方法打時間進(jìn)行比較,用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說,直奔主題。 什么是throttle和debounce? 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說,沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    lieeps 評論0 收藏0
  • 關(guān)于js節(jié)流函數(shù)throttle防抖debounce

    摘要:主要實現(xiàn)在于通過異步操作的事件間隔,對于前后兩次調(diào)用方法打時間進(jìn)行比較,用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說,直奔主題。 什么是throttle和debounce? 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說,沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    shery 評論0 收藏0
  • 函數(shù)節(jié)流防抖

    摘要:當(dāng)?shù)诙握{(diào)用該函數(shù)時,它會清除前一次的定時器并設(shè)置另一個。然而,如果前一個定時器尚未執(zhí)行,其實就是將其替換為一個新的定時器,然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶,有些情況下會產(chǎn)生問題: 向后臺發(fā)送數(shù)據(jù),用戶頻繁觸發(fā),對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    didikee 評論0 收藏0
  • 函數(shù)節(jié)流防抖

    摘要:當(dāng)?shù)诙握{(diào)用該函數(shù)時,它會清除前一次的定時器并設(shè)置另一個。然而,如果前一個定時器尚未執(zhí)行,其實就是將其替換為一個新的定時器,然后延遲一定時間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)節(jié)流函數(shù)防抖實現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時候都屬于用戶,有些情況下會產(chǎn)生問題: 向后臺發(fā)送數(shù)據(jù),用戶頻繁觸發(fā),對服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...

    huaixiaoz 評論0 收藏0

發(fā)表評論

0條評論

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