表格按钮重复触发是因Layui未内置防抖，需手动加状态锁；推荐用obj.tr.data('clicking')绑定行级状态，并在事件入口、layer.confirm的yes回调等异步环节均做判断与清理。
为什么表格按钮点击后会重复触发？
Layui 的 table.on('tool(test)') 事件本身不带防抖，用户手快连点、误触、或鼠标悬停后自动聚焦再点击，都可能让同一行的按钮回调执行多次。尤其当按钮触发的是 $.ajax 提交、弹窗二次确认、或调用 layer.open 时，重复执行会导致弹窗叠叠乐、接口被刷、状态错乱。
常见错误现象包括：
- 点击一次“编辑”，弹出两个 layer 窗口
- 连点“删除”，
layer.confirm触发两次，用户点“确定”后实际删了两遍 - 后端返回 200，但前端收到两个 success 回调，
table.reload()被调两次，表格闪动
根本原因不是 Layui 有 bug，而是事件监听层没做节流控制——它只负责派发，不负责限流。
用 setTimeout + 标记变量最简单可行
不需要引入 lodash 或封装复杂 hooks，在 button 回调里加几行原生 JS 就能稳住。核心思路：点击后设一个 isClicking 标记，配合 setTimeout 延迟清除，期间再次点击直接 return。
使用场景明确：仅用于单次操作型按钮（如编辑、删除、审核），不适用于需要连续交互的功能（如拖拽、长按）。
实操建议：
- 在
table.on('tool(test)')回调开头声明闭包变量let isClicking = false - 判断
if (isClicking) return，立刻拦截重复 - 执行真正逻辑前设
isClicking = true - 逻辑结束后用
setTimeout(() => { isClicking = false }, 300)恢复 - 300ms 是经验值，短于 200ms 用户可能感觉不到防抖，长于 500ms 会显得卡顿
table.on('tool(test)', function(obj){
let isClicking = false;
const data = obj.data;
<p>if (obj.event === 'edit') {
if (isClicking) return;
isClicking = true;</p><pre class='brush:php;toolbar:false;'>layer.open({
content: '编辑表单',
yes: function(){
// 提交逻辑...
$.ajax({...});
layer.closeAll();
}
});
setTimeout(() => { isClicking = false }, 300);} });
用 data- 属性绑定状态更稳妥
闭包变量在多行数据、多个按钮类型共存时容易混淆（比如编辑和删除共享同一个 isClicking）。更健壮的做法是把状态挂到 DOM 节点上，用 data-clicking 控制。
这样做的好处：
- 每个按钮独立控制，互不影响
- 即使用户快速切换不同行操作，也不会误锁
- 兼容 Layui 动态重绘（如
table.reload()后新 DOM 自动无状态）
参数差异注意：
-
obj.tr是当前行的<tr> 元素，可用作状态锚点 <li>不要用 <code>obj.elem（它是按钮本身，重绘后引用失效） - 设置
obj.tr.data('clicking', true)比直接写dataset更兼容老版 jQuery - 检查
obj.tr.data('clicking')是否为true，是则 return - 真正执行前设
obj.tr.data('clicking', true) - 成功/失败回调里统一清空：
obj.tr.removeData('clicking') - 不依赖
setTimeout，而靠业务逻辑终点清理，更准确 - 主回调做了防抖 → 弹窗只出一个
- 但用户狂点弹窗“确定”，
yes会被反复触发 - 结果：弹窗没重复，接口被刷了三遍
实操建议：
别在 layer.confirm 里漏掉防抖
很多人只在主回调里加防抖，却忘了 layer.confirm 的 yes 回调也是独立入口。用户点完 confirm 弹窗里的“确定”，如果没再防一次，照样会重复提交。
典型坑：
所以必须在 yes 内部也加一层判断：
layer.confirm('确定删除？', function(index){
if (obj.tr.data('confirming')) {
layer.close(index);
return;
}
obj.tr.data('confirming', true);
<p>$.ajax({
url: '/api/del',
data: {id: data.id},
success: function(){ table.reload(); }
});</p><p>layer.close(index);
obj.tr.removeData('confirming');
});</p>防抖这事，本质是「用户意图」和「系统响应」之间的时间差问题。Layui 不管这个，就得你亲手在每个可能被连点的出口补上状态锁——尤其是跨异步环节（事件 → 弹窗 → 回调）时，每一层都得自己盯住。
