常见思路
思路1. 前端:不允许二次或多次点击
例如使用:wx.showToast,wx.showLoading
弹出提示框,提示框显示xx秒,提示框显示期间无法再操作
通俗讲,就是弹出屏蔽层,防止用户第二次点击
例如使用:hidden 或者 disable 或者 wx:if
点击一次后,立即禁用或隐藏按钮
此方法可能存在的问题:在弹出提示框前已经点击了多次
思路2. 前端:二次点击或多次点击视为一次点击
utils.js中定义节流函数
/**
* 节流:在一定时间内连续触发某事件,在这段时间段内只执行首次触发的那一次。
*
* @param func 需要节流的函数
* @param timeGap 时间
*/
module.exports = {
throttleFunc: function throttleFunc(func, timeGap) {
if (timeGap==null || typeof(timeGap)=="undefined") {
timeGap = 2000 // 如果没有传递参数timeGap,或者该参数值为空,则使用默认值2000毫秒
}
let lastTime = null
return function () {
let currentTime = + new Date()
if (currentTime - lastTime > timeGap || !lastTime) {
console.log('exec', currentTime) // 正式环境可去掉
func.apply(this, arguments)
lastTime = currentTime
}else {
console.log('no exec') // 正式环境可去掉
}
}
},
}
page.js
页面js中使用节流函数
// 引入节流函数所在js文件
var utilsJs = require("../../utils.js")
// 页面按钮点击事件使用节流函数
saveData: utilsJs.throttleFunc(function(e) {
// 事件内部代码省略...
}, 2000),
网友评论