Layui Confirm弹出框连续点击按钮会触发多次事件

点我访问 LayUI框架官网

话不多数直接看代码

// 计数器
var i = 0;
layer.confirm(
  'Layui Confirm 快速点击按钮会触发多次事件',
  {icon: 1, title:'提示'},
  function(index){
    i++;
    console.log("当前执行次数: " + i);
    layer.close(index);
  }
);

/*
 * 打印日志
 * 当前执行次数: 1
 * 当前执行次数: 2
 */

---

解决方案

// 计数器
var i = 0;
// 生成标志位
var flag = false;
layer.confirm(
  'Layui Confirm 快速点击按钮会触发多次事件',
  {icon: 1, title:'提示'},
  function(index){
    if (!flag){
      i++;
      // 修改标志位
      flag = !flag;
      console.log("当前执行次数: " + i);
      // to Do Other
    }
    layer.close(index);
  }
);

/*
 * 打印日志
 * 当前执行次数: 1
 */

此时产生一个新的问题：如果事件是一个同步方法那么这个对话框会等待同步方法执行完毕才会关掉，就显得很怪异，解决办法就是将同步方法变成异步方法如：

// 生成标志位
var flag = false;
layer.confirm(
  'Layui Confirm 快速点击按钮会触发多次事件',
  {icon: 1, title:'提示'},
  function(index){
    if (!flag){
  
      // 修改标志位
      flag = !flag;
    
      /* 500 毫秒后执行 otherFun 同步方法
       * 在这500毫秒中,会先执行完layer.close(index)
       * confirm 对话框也就关闭了
       */ 
      setTimeout(otherFun, 500);
    }
    layer.close(index);
  }
);

总结

多思考 多实践

只要思想不滑坡 方法总比困难多

只要思想滑了坡 困难总比方法多