timg.jpg
小程序防止用户多次点击解决方案【使用函数节流throttle】
频繁的点击按钮，会出现多次的响应问题，可以采取函数节流 throttle的方式去解决该问题
1.error 示例图
image.png
2.看看success的示例图以及代码
image.png
3.首先在该项目所对应的页面中新建一个public.js脚本
public.js
module.exports = {
throttleFunc: function throttleFunc(func, marginTime) {
if (marginTime == undefined || marginTime == null) {
marginTime = 1700
}
let lastTime = null
return function () {
let currentTime = + new Date()
if (currentTime - lastTime > marginTime || !lastTime) {
func.apply(this, arguments)
lastTime = currentTime
}
}
},
}
4.在throttle.wxml中添加一个点击事件
<!--pages/throttle/throttle.wxml-->
<view class="container">
<button type="primary" style="width:100%" bindtap="handleAdd">点击</button>
</view>
5.引入public.js脚本并且在点击事件中进行使用
// pages/throttle/throttle.js
var common = require("../throttle/public.js") //引入public.js脚本
Page({
/**
* 页面的初始数据
*/
data: {
index:0
},
// 用户触发点击事件
handleAdd: common.throttleFunc(function(e){
var that = this
var index = that.data.index
that.setData({
index: index+1
})
console.log(index)
wx.navigateTo({
url: '/pages/tel/tel',
})
},1000),
})
通过上述的函数节流方式就可以解决用户频繁点击按钮导致触发多次点击以及相应多次的问题。
