最近因為公司需要接觸到微信小程序開發(fā)软驰，對本人來說轉(zhuǎn)變還是蠻大的畢竟我主要是開發(fā)iOS的贺氓，也是經(jīng)歷了微信小程序從入門到放棄（暑竟。。悠垛。）的過程。首先娜谊，什么都不知道的情況下肯定是先看官方文檔确买。按照文檔配置完之后就開始寫了，這里主要說一下我在開發(fā)過程中遇到的一個問題纱皆。
其實問題就是在view標簽中（button也可以）添加了一個bindtap點擊方法湾趾，點擊跳轉(zhuǎn)頁面芭商，對沒錯就是這么簡單！(我用的是sublime搀缠，沒用微信開發(fā)者工具)
那么問題來了铛楣，當你連續(xù)點擊兩次的時候會跳轉(zhuǎn)兩次，連續(xù)多次點擊直接就崩了胡嘿，返回就是空白頁蛉艾，這在實際使用中是非常影響用戶體驗的。比如當網(wǎng)絡(luò)條件差或卡頓的情況下衷敌，使用者會認為點擊無效而進行多次點擊勿侯，最后出現(xiàn)多次跳轉(zhuǎn)頁面的情況。查看文檔無果缴罗，上網(wǎng)查閱資料大部分都是用前端Web知識解決的助琐，作為一個小白很苦惱。
解決辦法
函數(shù)節(jié)流(throttle)：函數(shù)在一段時間內(nèi)多次觸發(fā)只會執(zhí)行第一次面氓，在這段時間結(jié)束前兵钮，不管觸發(fā)多少次也不會執(zhí)行函數(shù)。廢話不多說舌界，直接上代碼掘譬。
/utils/util.js(工具類):
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
fn()
_lastTime = _nowTime
}
}
}
module.exports = {
throttle: throttle
}
/pages/Phone/Phone .js:
const util = require('../../utils/util.js')
goOrder: util.throttle(function (e) {
wx.navigateTo({
url: '/pages/Phone/Phone',
})
}, 1000),
這樣就Ojbk啦，無論你怎么瘋狂點擊按鈕也只會1s觸發(fā)一次Ｉ氚琛４行！
BUT藐握，這樣的話出現(xiàn)一個問題靴拱，如果你在方法中打印
console.log(this)
console.log(e)
console.log((new Date()).getSeconds())
會發(fā)現(xiàn)this.data得到的this是undefined, 或者想要獲取微信組件button傳遞給點擊函數(shù)的數(shù)據(jù)e也是undefined，所以throttle函數(shù)還需要做一點處理來使其能用在微信小程序的頁面js里猾普。
出現(xiàn)這種情況的原因是throttle返回的是一個新函數(shù)袜炕，已經(jīng)不是最初的函數(shù)了。新函數(shù)包裹著原函數(shù)初家，所以組件button傳遞的參數(shù)是在新函數(shù)里偎窘。所以我們需要把這些參數(shù)傳遞給真正需要執(zhí)行的函數(shù)fn
最終解決辦法
/utils/util.js(工具類):
unction throttle(fn,gapTime) {
if (gapTime == null || gapTime == undefined) {
gapTime = 1500
}
let _lastTime = null
return function () {
let _nowTime = + new Date()
if (_nowTime - _lastTime > gapTime || !_lastTime) {
// 將this和參數(shù)傳給原函數(shù)
fn.apply(this,arguments)
_lastTime = _nowTime
}
}
}
再次點擊按鈕this和e都有了，完工笤成。
第一次寫有不對的地方還請大家多多指正评架，可能對于前端來說是很簡單的一個問題，但是對于我這種小白把搞出來了還是很有成就感的炕泳，前端大佬輕噴哈纵诞。。培遵。
