多次点击 layer.confirm 会弹出多个弹窗，因未做事件节流；应使用防抖（如 setTimeout）控制触发频率，并配合 btnAsync 和后端幂等性校验实现全链路防护。
layer.confirm 多次点击为什么会弹出多个弹窗
因为 layer.confirm() 是同步调用，每次点击都立即执行，而 layer 不会自动拦截重复调用。用户手快连点两下，“删除”按钮就可能触发两个 confirm 层——第二个遮住第一个，关闭时逻辑错乱，后端还可能收到两次请求。
这不是 UI 问题，是事件控制缺失。关键不是“弹窗怎么关”，而是“点下去之前就得拦住”。
-
layer.closeAll()只能清已存在的，拦不住新弹窗生成 -
disabled属性容易被绕过（比如键盘回车、右键菜单触发） - 没做任何节流时，哪怕加了 AJAX 提交，前端也早已把弹窗堆满 DOM 树
用 debounce 防止重复调用 layer.confirm
最直接有效的方式：把 layer.confirm() 包进防抖函数里，确保同一操作在指定时间窗口内只执行一次。
不需要引入 lodash，原生 setTimeout 就够用：
let confirmDebounceTimer = null;
document.getElementById('deleteBtn').addEventListener('click', function() {
clearTimeout(confirmDebounceTimer);
confirmDebounceTimer = setTimeout(() => {
layer.confirm('确认删除？', function(index) {
// 提交逻辑
$.ajax({ url: '/api/delete', ... });
layer.close(index);
});
}, 300);
});
注意点：
- 定时器变量
confirmDebounceTimer必须定义在事件外（如全局或闭包），否则每次点击都新建一个，clearTimeout失效 - 300ms 是经验阈值：短于 200ms 用户几乎感觉不到延迟，长于 500ms 显得卡顿
- 如果按钮本身有
data-id等上下文，记得在setTimeout回调里捕获，别用闭包变量引用错数据
表格工具栏中 table.on('tool') 的防抖写法
在 table.on('tool(test)') 回调里直接防抖，比给每个按钮单独绑事件更干净。
常见错误是把防抖逻辑写在 obj.event === 'del' 分支里但没隔离不同行的点击——结果 A 行点击后，B 行立刻点还是会被拦住。正确做法是按行级标识防抖：
const rowDebounceMap = new Map(); // key: data.id, value: timer
table.on('tool(test)', function(obj) {
if (obj.event === 'del') {
const id = obj.data.id;
if (rowDebounceMap.has(id)) {
clearTimeout(rowDebounceMap.get(id));
}
const timer = setTimeout(() => {
layer.confirm('确认删除？', function(index) {
// 删除逻辑
layer.close(index);
});
rowDebounceMap.delete(id);
}, 300);
rowDebounceMap.set(id, timer);
}
});
这样每行独立防抖，互不影响，又避免单行连点。
配合 btnAsync 实现真正安全的提交链路
光防弹窗还不够。用户点了“确定”之后如果网络慢、接口卡住，他可能再点一次“确定”按钮——这时防抖已经失效，因为事件源变成了弹窗内的按钮。
Layui 2.9.12+ 支持 btnAsync: true，让按钮回调返回 Promise，天然阻断重复点击：
layer.confirm('确认提交？', {
btnAsync: true,
btn: ['确定', '取消']
}, function(index, layero, that) {
that.loading(true); // 按钮变加载态
return $.ajax({
url: '/api/submit',
method: 'POST',
data: { ... }
}).then(res => {
layer.msg('提交成功');
layer.close(index);
}).catch(err => {
layer.msg('提交失败', { icon: 5 });
that.loading(false); // 恢复按钮
});
});
要点：
-
that.loading(true)会让按钮显示 loading 动画，视觉上就告诉用户“已在处理”，降低重试冲动 - Promise resolve 后 layer 自动 close；reject 后保持弹层，用户可重试，但按钮已恢复可用状态
- 这个机制和外部 click 防抖不冲突，建议叠加使用：外层防多弹窗，内层防多提交
真正容易被忽略的是：防抖只解决“前端多点”，不解决“后端多收”。如果接口本身没做幂等性校验，前端再严防死守也没用。抖动提醒、按钮禁用、异步锁、服务端 token 校验，得层层设防。
