知識(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
/*函數(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 };
使用:
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) } })
上面的兩種方式只是精簡(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)案例查看更多
相關(guān)閱讀
- web服務(wù)
- 網(wǎng)站小程序
- 云南網(wǎng)站建設(shè)方法
- 云南省建設(shè)廳網(wǎng)站
- 云南網(wǎng)站建設(shè)優(yōu)化
- typescript
- 國(guó)內(nèi)知名網(wǎng)站建設(shè)公司排名
- 云南網(wǎng)站建設(shè)公司地址
- 云南網(wǎng)站建設(shè)快速優(yōu)化
- 云南小程序開發(fā)制作
- 軟件開發(fā)
- 網(wǎng)站建設(shè)選
- 小程序退款
- 政府網(wǎng)站建設(shè)服務(wù)
- 小程序開發(fā)排名前十名
- 云南省城鄉(xiāng)建設(shè)廳網(wǎng)站
- 日歷組件
- 云南建設(shè)廳網(wǎng)站
- 退款
- 汽車報(bào)廢
- 報(bào)廢車管理
- 云南軟件定制公司
- 微分銷
- 網(wǎng)站建設(shè)公司地址
- 云南省建設(shè)廳網(wǎng)站官網(wǎng)
- 旅游網(wǎng)站建設(shè)
- 小程序分銷商城
- 昆明軟件公司
- 跳轉(zhuǎn)小程序
- 云南網(wǎng)站建設(shè)案例