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

SourceLife_Bx發表於2021-07-04
UI事件

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

總結

多思考 多實踐

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

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

相關文章