微信小程式函數節流多次點擊跳轉如何防止

在學本文的時候我們要知道函數節流是什麼，函數節流與防手震的意義，接下來本文就主要和大家分享微信小程式函數節流多次點擊跳轉如何防止，希望對大家有用。

場景

在使用小程式的時候會出現這樣一種情況：當網路條件差或卡在頓的情況下，使用者會認為點擊無效而進行多次點擊，最後出現多次跳轉頁面的情況。

解決方法

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

/utils/util.js:

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn()<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/>module.exports = {<br/>  throttle: throttle<br/>}<br/>/pages/throttle/throttle.wxml:<br/><button bindtap=&#39;tap&#39; data-key=&#39;abc&#39;>tap</button><br/>/pages/throttle/throttle.js<br/>const util = require(&#39;../../utils/util.js&#39;)<br/>Page({<br/>    data: {<br/>        text: &#39;tomfriwel&#39;<br/>    },<br/>    onLoad: function (options) {<br/>    },<br/>    tap: util.throttle(function (e) {<br/>        console.log(this)<br/>        console.log(e)<br/>        console.log((new Date()).getSeconds())<br/>    }, 1000)<br/>})</span>

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

但是這樣的話出現一個問題，就是當你想要取得this.data得到的this是undefined, 或想要取得微信元件button傳遞給點擊函數的資料e也是undefined ，所以throttle函數還需要做一點處理來使其能用在微信小程式的頁面js裡。

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

最後的throttle函數如下：

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null // 返回新的函数 return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn.apply(this, arguments)   //将this和参数传给原函数<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/></span>

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

相關推薦：

一個會話備忘錄小程式的實作方法

詳解JavaScript函數節流

JavaScript函數節流概念與用法實例詳解

#

以上是微信小程式函數節流多次點擊跳轉如何防止的詳細內容。更多資訊請關注PHP中文網其他相關文章！