Layui Confirm彈出框連續點擊按鈕會觸發多次事件

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);
  }
);

總結

多思考 多實踐

只要思想不滑坡 方法總比困難多

只要思想滑了坡 困難總比方法多