問題描述：
1）wxml片段
<view bindtap="loadMulti"> <text>連續點擊,加載多次</text></view><view bindtap="loadOnce"> <text>連續點擊,加載一次</text></view>
2）js代碼片段
loadMulti:function(e) { wx.navigateTo({ url: '/pages/loadMulti/index', })},3）快速，連續點擊“連續點擊，加載多次”文本串時，我們會發現，目標頁面loadMulti/index頁面被加載了N次，需要點擊N次返回，才可以返回到主頁面。
問題原因剖析：
小程序基于MINA框架，該框架的核心框架的核心是一個響應的數據綁定系統，整個系統分為兩塊視圖層（View）和邏輯層（App Service），框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候，只需要在邏輯層修改數據，視圖層就會做相應的更新；當點擊按鈕的時候，視圖層會發送 bindtap的事件給邏輯層，邏輯層找到對應的事件處理函數loadMulti執行。
由于視圖層發送bindtap事件給邏輯層并找到對應的處理函數需要時間T1，找到對應的處理函數loadMulti后，執行loadMulti函數：wx.navigateTo, hide 原頁面，需要時間T2，如果在T1+T2時間內，快速連續點擊N次，完全可以加載顯示N次目標頁面。
解決方案：
loadOnce:function(e) { if (!this.pageLoading) { this.pageLoading = !0; wx.navigateTo({ url: '/pages/loadOnce/index', }) } }, onShow: function() { this.pageLoading = !1;}1）loadOnce事件處理函數中，設置pageLoading = true
2）頁面的onShow事件中，設置pageLoading = false
其實我們可以封裝成方法：
/***解決連續點擊多次沖出觸發事件*/function throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined) { gapTime = 1500 } let _lastTime = null // 返回新的函數 return function () { let _nowTime = + new Date() if (_nowTime - _lastTime > gapTime || !_lastTime) { fn.apply(this, arguments) //將this和參數傳給原函數 _lastTime = _nowTime } }} <button bindtap='tap' data-key='abc'>tap</button>
const util = require('../../utils/util.js')Page({ data: { text: 'tomfriwel' }, onLoad: function (options) { }, tap: util.throttle(function (e) { console.log(this) console.log(e) console.log((new Date()).getSeconds()) }, 1000)})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
