为了避免这个问题,需要在代码中加入防止多次点击的措施。一种解决方法是在按钮点击后将按钮禁用一段时间,直到逻辑处理完成后再将按钮恢复可用状态。示例代码如下:
var button = document.getElementById("myButton");
var lastClickTime = 0; // 上一次点击的时间戳
button.addEventListener("click", function() {
var now = new Date().getTime(); // 获取当前时间戳
var interval = now - lastClickTime; // 计算和上一次点击的时间间隔
if (interval > 1000) { // 如果时间间隔大于1秒,则触发处理逻辑
button.disabled = true; // 禁用按钮
doSomething().then(function() { // 处理逻辑,处理完成后恢复按钮
button.disabled = false;
lastClickTime = now; // 保存本次点击时间戳
});
} else {
alert("请勿频繁点击!"); // 如果时间间隔过短,则提示用户不要频繁点击
}
});
function doSomething() {
// 这里放你的逻辑处理代码,比如发起Ajax请求等
return new Promise(function(resolve) {
setTimeout(function() {
resolve();
}, 2000);
});
}
上一篇:按钮叠加层