欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序之使用函數(shù)防抖與函數(shù)節(jié)流 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營(yíng)銷的便利,運(yùn)營(yíng)的高效,讓網(wǎng)站成為營(yíng)銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持!

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

微信小程序之使用函數(shù)防抖與函數(shù)節(jié)流

發(fā)表時(shí)間:2021-2-3

發(fā)布人:葵宇科技

瀏覽次數(shù):91

函數(shù)防抖和函數(shù)節(jié)流都是老生常談的問題了。這兩種方式都能優(yōu)化 js 的性能。有些人可能會(huì)搞混兩個(gè)的概念。所以,我以自己的理解,來解釋這兩個(gè)概念的含義。并且列舉在小程序中這兩個(gè)方法的使用。


函數(shù)防抖: 英文 debounce 有防反跳的意思,大致就是指防止重復(fù)觸發(fā)。

那么,函數(shù)防抖,真正的含義是:延遲函數(shù)執(zhí)行。即不管debounce函數(shù)觸發(fā)了多久,只在最后一次觸發(fā)debounce函數(shù)時(shí),才定義setTimeout,到達(dá)間隔時(shí)間再執(zhí)行 需要防抖的函數(shù)。

用處:多用于 input 框 輸入時(shí),顯示匹配的輸入內(nèi)容的情況。

 

函數(shù)節(jié)流: 英文 throttle 有節(jié)流閥的意思。大致意思也是 節(jié)約觸發(fā)的頻率

那么,函數(shù)節(jié)流,真正的含義是:單位時(shí)間n秒內(nèi),第一次觸發(fā)函數(shù)并執(zhí)行,以后 n秒內(nèi)不管觸發(fā)多少次,都不執(zhí)行。直到下一個(gè)單位時(shí)間n秒,第一次觸發(fā)函數(shù)并執(zhí)行,這個(gè)n秒內(nèi)不管函數(shù)多少次都不執(zhí)行。

用處:多用于頁(yè)面scroll滾動(dòng),或者窗口resize,或者防止按鈕重復(fù)點(diǎn)擊等情況

 

其實(shí)如果只根據(jù) 控制函數(shù)觸發(fā)的頻率是不好區(qū)分這兩個(gè)概念的。我認(rèn)為兩個(gè)函數(shù)都能達(dá)到防止重復(fù)觸發(fā)的功能。但是函數(shù)防抖是 n秒后延遲執(zhí)行;而函數(shù)節(jié)流立馬執(zhí)行,n秒后再立馬執(zhí)行。

 

在小程序中,函數(shù)防抖、函數(shù)節(jié)流的使用方式:

一般都會(huì)把這兩種方法封裝在公用的 js 中:

tool.js

復(fù)制代碼
/*函數(shù)節(jié)流*/
function throttle(fn, interval) {
  var enterTime = 0;//觸發(fā)的時(shí)間
  var gapTime = interval || 300 ;//間隔時(shí)間,如果interval不傳,則默認(rèn)300ms
  return function() {
    var context = this;
    var backTime = new Date();//第一次函數(shù)return即觸發(fā)的時(shí)間
    if (backTime - enterTime > gapTime) {
      fn.call(context,arguments);
      enterTime = backTime;//賦值給第一次觸發(fā)的時(shí)間,這樣就保存了第二次觸發(fā)的時(shí)間
    }
  };
}

/*函數(shù)防抖*/
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000;//間隔時(shí)間,如果interval不傳,則默認(rèn)1000ms
  return function() {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此處的arguments,因?yàn)閟etTimeout是全局的,arguments不是防抖函數(shù)需要的。
    timer = setTimeout(function() {
      fn.call(context,args);
    }, gapTime);
  };
}

export default {
  throttle,
  debounce
};
復(fù)制代碼

 使用:

復(fù)制代碼
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)
   }
})
復(fù)制代碼

 

上面的兩種方式只是精簡(jiǎn)版的,可能還有某些情況沒考慮到,以后遇到了再優(yōu)化。

 

函數(shù)節(jié)流的說明:

(1) 第一次執(zhí)行時(shí),是一定能執(zhí)行函數(shù)的。

(2) 然后 n秒內(nèi)第二次觸發(fā)的時(shí)候,當(dāng)?shù)谝淮闻c第二次間隔不足 設(shè)置的間隔時(shí)間時(shí),就不會(huì)執(zhí)行。之后第三、第四次觸發(fā)還是不執(zhí)行。

(3) 直到 n秒之后 有且僅有一次,并且是第一次再次觸發(fā)函數(shù)。

 

函數(shù)防抖的說明:

(1) 第一次觸發(fā)函數(shù)時(shí),定義了一個(gè)定時(shí)器。在 n秒后執(zhí)行。

(2) 然后 函數(shù)第二次觸發(fā)的時(shí)候,由于閉包的特性,這時(shí)候的 timer已經(jīng)是第一次觸發(fā)時(shí)的 定時(shí)器的標(biāo)識(shí)了。然后直接清除第一次的setTimeout,這時(shí)候第一次的setTimeout里面的內(nèi)容就不會(huì)執(zhí)行了。然后再定義第二次的setTimeout。

(3) 然后重復(fù)第二個(gè)步驟,一直清除,又一直設(shè)置。直到函數(shù)最后一次觸發(fā),定義了最后的一個(gè)定時(shí)器,并且間隔 n秒 執(zhí)行。

(4) 如果在 最后一個(gè)定時(shí)器沒執(zhí)行時(shí),函數(shù)又觸發(fā)了,那么又重復(fù)第三步。相當(dāng)于 設(shè)置的間隔時(shí)間,只是延遲函數(shù)執(zhí)行的時(shí)間,而不是間隔多少秒再執(zhí)行。

 

到這里,這兩個(gè)方式的區(qū)別就很明顯了。函數(shù)節(jié)流減少函數(shù)的觸發(fā)頻率,而函數(shù)防抖則是延遲函數(shù)執(zhí)行,并且不管觸發(fā)多少次都只執(zhí)行最后一次

 

相關(guān)案例查看更多