微信小程序BindTap快速连续点击目标页面跳转多次问题处理
程序员文章站
2022-08-20 13:18:24
问题描述：
1）wxml片段
连续点击,加载多次
问题描述：
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)
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。