如何防止用户双击按钮打开两个相同的Boostrap对话框？

Question

如果ajax需要一段时间来加载对话框并且用户双击该按钮，屏幕上将弹出两个相同的对话框。我想阻止它发生。

$("#ShowUpCallTag").on('click', function (e) { 
     $.ajax({ 
      url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
      type: 'get', 
      datatype: 'json' 
     }).done(function (data) { 
      var dialog = main.ship.calltags.dialog.buildDialog(data); 
      dialog.open(); 
     }); 
    }); 

Answer 1

我认为你的代码中的问题是你不知道对话框是否打开。我会做什么：

1. 创建一个在同一范围比你的jQuery呼叫的变量，例如：var dialogOpened = false
2. 在你的点击处理函数，做Ajax调用只有dialogOpened === false
3. 在你done(function (data) {})回调，将dialogOpened设置为true，并监听Bootstrap生成的事件以了解用户何时关闭模式（请参阅Bootstrap Modal Events）
4. 当模式关闭时，请将dialogOpened设置为false。
5. 我认为这也是一个很好的做法：如果您绑定点击的元素是一个按钮，您可以在用户点击该按钮后将其禁用。

Answer 2

  var isModelDialogOpen = false; 
      $("#ShowUpCallTag").on('click', function (e) { 
      if (isModelDialogOpen == false) { 
       isModelDialogOpen = true; 

       //Popup call tag dialog. 
       $.ajax({ 
        url: '/Ship/CallTags/Dialog/' + $(e.target).data('calltagid'), 
        type: 'get', 
        datatype: 'json' 
        .done(function (data) { 
         var dialog = main.ship.calltags.dialog.buildDialog(data); 
         dialog.open(); 
        }) 
        .always(function (data) { 

         isModelDialogOpen = false; 
        }); 
      } 
     });