小程序：前端防止用户重复提交&即时消息(IM)重复发送问题解决
背景：
最近参与开发的小程序，涉及到即时消息（IM）发送的功能；
聊天界面如下，通过键盘上的【发送】按钮，触发消息发送功能
问题发现：
功能开发完毕，进入测试流程；测试工程师反馈说：
在Android手机上，在极短的时间内频繁点击键盘上的【发送】按钮，消息会重复发送；IOS上该问题不太明显
本以为是普通的防重复提交问题，于是自然想到通过设定flag/js加锁的方式解决该问题，于是开始优化代码：
项目基本代码：
wxml：
<input type="text" value="{{msgValue}}" confirm-type="send" bindconfirm="sendMsg" bindinput="bindKeyInput" placeholder="请输入聊天内容" />
JS：
bindKeyInput(e) {
this.setData({
msgValue: e.detail.value.replace(/^\s+|\s+$/g, "")
});
},
sendMsg() {
let self = this;
let msg = self.data.msgValue;
if (msg && self.data.sendMsgState) {
self.data.sendMsgState = false
app.globalData.nim.sendText({
scene: 'p2p',
to: self.data.doctorId,
text: msg,
done(error, msg) {
if (!error) {
//消息发送成功
self.setData({
msgValue: ''
})
} else {
//消息发送失败
wx.showToast({
title: '消息发送失败，请稍后再试',
icon: 'none',
duration: 1500,
mask: true
})
}
}
})
}
}
1# 设定flag/js加锁
//在页面初始数据data中，声明“锁”: sendMsgState
data: {
sendMsgState: true
}
//在发送消息方法中，符合消息发送条件的时候，把sendMsgState的值置为false;
//并在消息发送成功之后，将消息发送框的value置空的之后，将sendMsgState设为true
sendMsg() {
let self = this;
let msg = self.data.msgValue;
if (msg && self.data.sendMsgState) {
self.data.sendMsgState = false
app.globalData.nim.sendText({
scene: 'p2p',
to: self.data.doctorId,
text: msg,
done(error, msg) {
if (!error) {
//消息发送成功，置空输入框；然后把sendMsgState重新设置为true
self.setData({
msgValue: ''
}, () => {
self.data.sendMsgState = true
})
} else {
//消息发送失败
wx.showToast({
title: '消息发送失败，请稍后再试',
icon: 'none',
duration: 1500,
mask: true
})
}
}
})
}
}
测试结果：
Android手机上依然存在该问题，且很容易复现。
分析原因：
在极短的时间内，频繁点击键盘上的发送按钮；此时：锁（sendMsgState）还没来得及置为false,发送内容输入框的值还没有被清空；
但发送事件已经被有效触发多次，导致了发送消息的重复。
2# 在方案一设定flag/js加锁的基础上，增加连续点击按钮事件间隔少于1s，或者连续两次发送内容相同都停止发送的补充规则
2.1：增加连续点击按钮事件间隔少于1s
经验证：正常的消息发送使用流程，连续两次的消息发送间隔都是超过1s的；间隔小于1s的行为，可判定为重复提交:
具体做法：
步骤一：在data中注册lastSendTime，设置值为空；触发发送事件sendMsg的时候，把当前时间保存到变量currentTime;
步骤二：判断当前时间currentTime与上次发送时间的差值是否小于1000；如果是，则发送事件连续触发时间短于1s,停止发送；
步骤三：消息发送成功之后，在置空内容输入框的setData回调方法中，将lastSendTime的值更新为：currentTime;
2.2：如果当前发送的消息内容和上一次保存在data中的msgValue相同，则可判断连续两次消息重复
因为每次发送成功，data中msg都会被置空;而内容为空的时候，又是不允许发送的；
所以，在短时间内，如果当前发送的消息内容和上一次保存在data中的msgValue相同，则可判断连续两次消息重复
最终优化方案：
sendMsg() {
let self = this;
let msg = self.data.msgValue;
// 防止两次点击操作间隔太快
let currentTime = new Date();
if ((currentTime - this.data.lastSendTime < 1000) || (msg === self.data.msg)) {
//发送事件连续触发时间短于1s，或连续两次发送内容相同，则返回
return;
}
if (msg && self.data.sendMsgState) {
self.data.sendMsgState = false
app.globalData.nim.sendText({
scene: 'p2p',
to: self.data.doctorId,
text: msg,
done(error, msg) {
if (!error) {
self.setData({
msgValue: ''
}, () => {
self.data.sendMsgState = true
self.data.lastSendTime = currentTime
})
} else {
//消息发送失败
wx.showToast({
title: '消息发送失败，请稍后再试',
icon: 'none',
duration: 1500,
mask: true
})
}
}
})
}
}
综上所述：
在单一的flag/js加锁无效的情况下；通过添加额外的规则补充校验，最终方案如下：
在发送内容msg有效及flag/js锁为true的基础上；发送事件sendMsg连续两次触发时间间隔大于或等于1s，及连续两次发送内容不相同的情况下，才允许消息被发送；
最终测试结果：无论是Android，还是IOS都可以正常发送消息，无消息重复发送情况发生了
