微信小程式 防止多次點選跳轉（函式節流）

在使用小程式的時候會出現這樣一種情況：當網路條件差或卡頓的情況下，使用者會認為點選無效而進行多次點選，最後出現多次跳轉頁面的情況，就像下圖（快速點選了兩次）：

然後從 輕鬆理解js函式節流和函式防抖 中找到了解決辦法，就是函式節流(throttle)：函式在一段時間內多次觸發只會執行第一次，在這段時間結束前，不管觸發多少次也不會執行函式。

/utils/util.js:

function

throttle(fn, gaptime) 
let _lasttime = null
return
function
()     }
}module.exports =

/pages/throttle/throttle.wxml:

<

button 
bindtap
='tap' 
data-key
='abc'
>tap
button
>

/pages/throttle/throttle.js

const util = require('../../utils/util.js')

page(,
onload: function (options) ,
tap: util.throttle(function (e) , 1000)
})

這樣，瘋狂點選按鈕也只會1s觸發一次。

出現這種情況的原因是throttle返回的是乙個新函式，已經不是最初的函式了。新函式包裹著原函式，所以元件button傳遞的引數是在新函式裡。所以我們需要把這些引數傳遞給真正需要執行的函式fn。

最後的throttle函式如下：

function

throttle(fn, gaptime) 
let _lasttime = null
//返回新的函式
return
function
()     }
}

再次點選按鈕this和e都有了：

微信小程式防止多次點選提交的方法

一 利用頁面資料加上lock引數 page.js中加入 page 表單提交 submit that.data if lock 資料請求操作 請求完成後 開鎖 that.setdata 二 利用背景圖層遮擋 wxml中加入 page.js中加入 page 表單提交 submit that.data i...

微信小程式頁面跳轉

每乙個列表對應著都有乙個詳情頁面，那麼這個詳情頁面可以通過乙個標籤去跳轉，也就是用上述的標籤就可以數顯跳轉 那麼對應列表裡面的詳情頁我們還需要在這個鏈結上進行乙個操作。也就是在鏈結後面 新增乙個對應的id引數，然後js裡面去接受這個引數，就會根據資料來跳轉到對應的詳情頁去了。exports.gets...

微信小程式 onLoad 函式

小程式註冊完成後，載入頁面，觸發onload方法。頁面載入後觸發onshow方法，顯示頁面。首次顯示頁面，會觸發onready方法，渲染頁面元素和樣式，乙個頁面只會呼叫一次。當小程式後台執行或跳轉到其他頁面時，觸發onhide方法。當小程式有後台進入到前台執行或重新進入頁面時，觸發onshow方法。...