• 首頁 > 上網技巧 > 電腦小技巧 > 微信小程序之使用函數防抖與函數節流

    微信小程序之使用函數防抖與函數節流

    時間:2019-08-21 17:46 作者:QQ地帶 我要評論

    函數防抖和函數節流都是老生常談的問題了。這兩種方式都能優化 js 的性能。有些人可能會搞混兩個的概念。所以,我以自己的理解,來解釋這兩個概念的含義。并且列舉在小程序中這兩個方法的使用。
     
     
     
    函數防抖: 英文 debounce 有防反跳的意思,大致就是指防止重復觸發。
     
    那么,函數防抖,真正的含義是:延遲函數執行。即不管debounce函數觸發了多久,只在最后一次觸發debounce函數時,才定義setTimeout,到達間隔時間再執行 需要防抖的函數。
     
    用處:多用于 input 框 輸入時,顯示匹配的輸入內容的情況。
     
     
     
    函數節流: 英文 throttle 有節流閥的意思。大致意思也是 節約觸發的頻率
     
    那么,函數節流,真正的含義是:單位時間n秒內,第一次觸發函數并執行,以后 n秒內不管觸發多少次,都不執行。直到下一個單位時間n秒,第一次觸發函數并執行,這個n秒內不管函數多少次都不執行。
     
    用處:多用于頁面scroll滾動,或者窗口resize,或者防止按鈕重復點擊等情況
     
     
     
    其實如果只根據 控制函數觸發的頻率是不好區分這兩個概念的。我認為兩個函數都能達到防止重復觸發的功能。但是函數防抖是 n秒后延遲執行;而函數節流是立馬執行,n秒后再立馬執行。
     
     
     
    在小程序中,函數防抖、函數節流的使用方式:
     
    一般都會把這兩種方法封裝在公用的 js 中:
     
    tool.js
     
    復制代碼
    /*函數節流*/
    function throttle(fn, interval) {
      var enterTime = 0;//觸發的時間
      var gapTime = interval || 300 ;//間隔時間,如果interval不傳,則默認300ms
      return function() {
        var context = this;
        var backTime = new Date();//第一次函數return即觸發的時間
        if (backTime - enterTime > gapTime) {
          fn.call(context,arguments);
          enterTime = backTime;//賦值給第一次觸發的時間,這樣就保存了第二次觸發的時間
        }
      };
    }
     
    /*函數防抖*/
    function debounce(fn, interval) {
      var timer;
      var gapTime = interval || 1000;//間隔時間,如果interval不傳,則默認1000ms
      return function() {
        clearTimeout(timer);
        var context = this;
        var args = arguments;//保存此處的arguments,因為setTimeout是全局的,arguments不是防抖函數需要的。
        timer = setTimeout(function() {
          fn.call(context,args);
        }, gapTime);
      };
    }
     
    export default {
      throttle,
      debounce
    };
    復制代碼
     使用:
     
    復制代碼
    import tool from "../../static/js/tool.js";
    Page({
       data:{
        win_scrollTop:0
       },
       onPageScroll: tool.throttle(function(msg){
          this.setData({
            win_scrollTop: msg[0].scrollTop
          });
       }),
       gotoUnlock: tool.debounce(function() {
          this.saveUserInfo();
       }),
       saveUserInfo:function(){
          console.log(111)
       }
    })
    復制代碼
     
     
    上面的兩種方式只是精簡版的,可能還有某些情況沒考慮到,以后遇到了再優化。
     
     
     
    函數節流的說明:
     
    (1) 第一次執行時,是一定能執行函數的。
     
    (2) 然后 n秒內第二次觸發的時候,當第一次與第二次間隔不足 設置的間隔時間時,就不會執行。之后第三、第四次觸發還是不執行。
     
    (3) 直到 n秒之后 有且僅有一次,并且是第一次再次觸發函數。
     
     
     
    函數防抖的說明:
     
    (1) 第一次觸發函數時,定義了一個定時器。在 n秒后執行。
     
    (2) 然后 函數第二次觸發的時候,由于閉包的特性,這時候的 timer已經是第一次觸發時的 定時器的標識了。然后直接清除第一次的setTimeout,這時候第一次的setTimeout里面的內容就不會執行了。然后再定義第二次的setTimeout。
     
    (3) 然后重復第二個步驟,一直清除,又一直設置。直到函數最后一次觸發,定義了最后的一個定時器,并且間隔 n秒 執行。
     
    (4) 如果在 最后一個定時器沒執行時,函數又觸發了,那么又重復第三步。相當于 設置的間隔時間,只是延遲函數執行的時間,而不是間隔多少秒再執行。
     
     
     
    到這里,這兩個方式的區別就很明顯了。函數節流是減少函數的觸發頻率,而函數防抖則是延遲函數執行,并且不管觸發多少次都只執行最后一次。

    標簽: 微信小程序
    頂一下
    (0)
    0%
    踩一下
    (0)
    0%

    Google提供的廣告

    pk10最牛稳赚计划软件
  • 3d开机号彩经网 六合网站一头一尾中特 2019两码中特期期准 云南快乐10分开奖数据 老时时彩开奖结果 吉林快3三同号遗漏一定牛 十一选五杀号网 河南福利快三走势图 重庆时时新一代计划 炸金花最常用出千方法 福彩3d下期的预测号码 博彩中奖 黑龙江p62中奖号码 浙江11选5爱彩人 2000年辽宁35选7走势图