jQuery UI 对话框上的按钮是不是必须去抖动?

Posted

技术标签:

【中文标题】jQuery UI 对话框上的按钮是不是必须去抖动?【英文标题】:Do buttons on a jQuery UI Dialog have to be debounced?jQuery UI 对话框上的按钮是否必须去抖动? 【发布时间】:2019-02-13 04:53:44 【问题描述】:

我一直在尝试在我最初在 App Maker 中编写的应用程序中使用一些 jQuery UI 对话框,并且我希望将其作为常规网络应用程序使用。但是我遇到了一些问题,事件发生的频率比预期的要高。

这段代码是一个更大的应用程序的一部分,因为我发现通过减少我必须处理的东西的数量来解决问题很有帮助。当代码进入 html 页面时,它会读取某个日历上的事件并将它们与允许用户编辑和保存每个事件描述以及删除事件的按钮一起显示。在这种情况下,我还添加了一些额外的 Sav 和 Edt 按钮,它们的作用相同,只是它们不使用对话框。如下图所示。

当您按下左下方的编辑按钮时,您会看到一个如下所示的对话框:

如果您在事件描述下按下编辑按钮,则会发生一个对话框,该对话框会在文本区域中显示该事件描述。如果您按下对话框上的“保存”按钮,那么它应该将该偶数描述保存回日历上的该事件描述,然后再次显示该事件。但是,如果您按下编辑按钮,然后按七次保存按钮,则控制台输出如下:

对于每个 openEventDescriptionEditDialog: idS=05 应该有一个 saveEventDescription: idS=05 和一个 userCodeAppPanel:6 dispEvents()。有时,日志会指示 dispEvents 的数量,数字在左侧。它们同时发生,因为它们在 .withSuccessHandler 回调中。但是你可以看到,第一次你只得到一个,第二次你得到两个,第三次 3,第四次 5,第五次 5,依此类推。

/*
Unrecognized feature: 'vibrate'.
userCodeAppPanel:2 Unrecognized feature: 'vibrate'.
userCodeAppPanel:46 My code
userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:194 Co message: "There was an error during the transport or process…this request. Error code = 10, Path = /wardeninit", name: "TransportError", stack: "TransportError: There was an error during the tran…/js/1995166154-warden_bin_i18n_warden.js:178:252)"
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Remove the if alreadySent routine.
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 26307.999999999993, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=First Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=First Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 38723.69999999955, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Second Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 38723.69999999955, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Second Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
2userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Second Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 50924.50000000008, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Third time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 50924.50000000008, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Third time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 50924.50000000008, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Third time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
3userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Third time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 63643.79999999983, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fourth Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
4userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Fourth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 85540.60000000027, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Fifth Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
5userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Fifth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 100964.39999999985, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Sixth Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
5userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
userCodeAppPanel:15 openEventDescriptionEditDialog: idS=05 , text=Sixth Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
userCodeAppPanel:21 n.Event originalEvent: MouseEvent, type: "click", isDefaultPrevented: ƒ, timeStamp: 120348.50000000006, jQuery112407953633868134593: true, …
userCodeAppPanel:38 saveEventDescription: idS=05 , text=Seventh Time
1995166154-warden_bin_i18n_warden.js:56 Net state changed from IDLE to BUSY
7userCodeAppPanel:6 dispEvents()
1995166154-warden_bin_i18n_warden.js:56 Net state changed from BUSY to IDLE
*/

然后我用 Edt 和 Sav 按钮做了同样的事情。我使用了与使用的对话框方法相同的功能,但我没有进入对话框,而是将文本放入顶部的 textarea 并对其进行编辑,然后按 Sav 按钮,几次之后我发现它运行良好。

我已经尽可能地减少了代码。

代码.gs

function dialogtestStartUp()

  SpreadsheetApp.getUi().createMenu('Dialog Test') 
    .addItem('Test Dialog', 'showDialogTest')
    .addToUi();  

function setupStartUpTrigger()
  if(!isTrigger('dialogtestStartUp'))
    ScriptApp.newTrigger('dialogtestStartUp').forSpreadsheet(gSSID).onOpen().create();
  


function showDialogTest()
  var ui=HtmlService.createHtmlOutputFromFile('dialogtest').setHeight(550).setWidth(400);
  SpreadsheetApp.getUi().showModelessDialog(ui, 'Dialog Test')



function saveMyEventDescription(evObj)
  Logger.log('saveMyEventDescription:\nevObj.text=%s\nevObj.calId=%s\nevObj.evId=%s\nevObj.idS=%s',evObj.text,evObj.calId,evObj.evId,evObj.idS);
  CalendarApp.getCalendarById(evObj.calId).getEventById(evObj.evId).setDescription(evObj.text);
  return true;
 

function getEventDescription(evObj)
  evObj['text']=CalendarApp.getCalendarById(evObj.calId).getEventById(evObj.evId).getDescription();
  Logger.log('getEventDescription:\nevObj.text=%s\nevObj.calId=%s\nevObj.evId=%s\nevObj.idS=%s',evObj.text,evObj.calId,evObj.evId,evObj.idS);
  return evObj;


function getMyEvents()//This is where the event descriptions and buttons are generated.  Then they're loaded into the html page when it loads.
  Logger.log('getMyEvents');
  var allCals=CalendarApp.getAllCalendars();
  var s=Utilities.formatString('<strong>%s</strong>',Utilities.formatDate(new Date(),Session.getScriptTimeZone(),"E MMM d, yyyy HHmm"));
  var min=60 * 1000;
  var hr=60 * min;
  var day=24 * hr;
  var wk=7 * day;
  var start = new Date(new Date().setHours(0,0,0));
  var end=new Date(start.valueOf() + (5 * wk));
  var incl=['Daily Events'];
  for(var i=0;i<allCals.length;i++)
  
    if(incl.indexOf(allCals[i].getName())>-1)
    
      s+=Utilities.formatString('<br /><strong>%s</strong>',allCals[i].getName());
      var events=allCals[i].getEvents(start, end);
      if(events)
      
        s+='<br /><ul>';
        for(j=0;j<events.length;j++)
        
          var calId=allCals[i].getId();
          var evId=events[j].getId();
          var evDesc=events[j].getDescription();
          var idS=String(i)+String(j);
          if(events[j].isAllDayEvent())
          
            s+=Utilities.formatString('<li><strong>%s</strong>-AllDay %s <input type="hidden" id="ids-%s" value="%s,%s" /> <input type="button" title="Move or Delete Event Dialog" name="MoveOrDeleteEvent" value="Remove" onClick="movdelDialog(\'ids-%s\',\'%s\',\'%s\');" /></li>',events[j].getTitle(),Utilities.formatDate(events[j].getStartTime(),Session.getScriptTimeZone(),"E MMM d"),idS,calId,evId,idS,calId,evId);
          
          else
          
            s+=Utilities.formatString('<li><strong>%s</strong>-%s <input type="hidden" id="ids-%s" value="%s,%s" /><input type="button" title="Move or Delete Event Dialog" name="MoveOrDeleteEvent" value="Remove" onClick="movdelDialog(\'%s\',\'%s\',\'%s\');" /></li>',events[j].getTitle(),Utilities.formatDate(events[j].getStartTime(),Session.getScriptTimeZone(),"E MMM d - HHmm"),idS,calId,evId,idS,calId,evId);
          
          s+=Utilities.formatString('<br /><div id="evdesc-%s">%s</div>&nbsp;&nbsp;<input id="edtbtn-%s" type="button" value="Edit" title="Edit Dialog" onClick="editEventDescription(\'%s\',\'%s\',\'%s\',\'%s\');" /></li>',idS,evDesc,idS,calId,evId,idS,evDesc);
          s+=Utilities.formatString('<input type="button" id="edt-%s" value="Edt" onClick="edtEvntDesc(\'%s\',\'%s\',\'%s\',\'%s\');" />',idS,calId,evId,idS,evDesc);
          s+=Utilities.formatString('<input type="button" id="sav-%s" value="Sav" onClick="savEvntDesc(\'%s\',\'%s\',\'%s\',\'%s\');" />',idS,calId,evId,idS,evDesc);
        
        s+='</ul>';
      
    
  
  return s;


function delMyEvents(idA)

  if(idA)
  
    for(var i=0;i<idA.length;i++)
    
      var cal=CalendarApp.getCalendarById(idA[i][0]);//calendarId
      cal.getEventById(idA[i][1]).deleteEvent();//eventId
    
  
  return true;


function getTimeStamp()

  return Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "E MMM dd, yyyy hh:mm a");

    

我称之为 dialogtest.html 的 html:

<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <script>
    $(function()
      dispEvents();
    );
    function dispEvents()
       console.log('dispEvents()');
      google.script.run
        .withSuccessHandler(upDateEvents)
        .getMyEvents();
    
    function upDateEvents(hl)
      $('#hotbox').html(hl);
    
    function openEventDescriptionEditDialog(evObj)
      console.log('openEventDescriptionEditDialog: idS=%s , text=%s',evObj.idS,evObj.text);    
      var alreadySent=false;
      $('#dialog-1').dialog(autopen:true,width:250,height:300);
      $('#dialog-1 #evdesc').val(evObj.text);
      $('#dialog-1 #saveBtn').button().click(function(e)
        e.preventDefault();
        console.log(e);
        evObj.text=$('#dialog-1 #evdesc').val();
        if(true)
          saveEventDescription(evObj);
          alreadySent=true;
        
        //$(this).parent().dialog('close');
      );
      $('#dialog-1 #clsBtn').button().click(function(e)
        $(this).parent().dialog('close');
      );
    
    function editEventDescription(calId,evId,idS,evDesc)
      var evObj=calId:calId,evId:evId,idS:idS,text:evDesc;
      openEventDescriptionEditDialog(evObj);
    
    function saveEventDescription(evObj)
      console.log('saveEventDescription: idS=%s , text=%s',evObj.idS,evObj.text);
      google.script.run
      .withSuccessHandler(function(evObj)
        dispEvents();
        $('#dialog-1').dialog('close');
      )
      .saveMyEventDescription(evObj);
    
    function edtEvntDesc(calId,evId,idS,evDesc)
      var evObj=calId:calId,evId:evId,idS:idS,text:evDesc;
      $('#ta1').val(evObj.text);
      console.log(evObj);
    
    function savEvntDesc(calId,evId,idS,evDesc)
      var evObj=calId:calId,evId:evId,idS:idS,text:evDesc;
      evObj.text=$('#ta1').val();
      console.log(evObj);
      google.script.run
      .withSuccessHandler(function(Obj)
        dispEvents();
      )
      .saveMyEventDescription(evObj);
    
    console.log("My code");
  </script>
  <style>
    #dialog-1display:none;
    input[type="button"]background-color:#ffffff;border:1px solid #000;-webkit-appearance:none;
    #dialogs input[type="button"]margin:10px 0;
    #ta1direction:ltr;
  </style>
  </head>
  <body>
  <div class="container">
  <div id="div1"><textarea id="ta1" rows="10" cols="40"></textarea></div>
   <div id="hotbox"></div>
   </div>
   <input type="button" value="Display Events" onClick="dispEvents();" />
   <div id="dialogs">
   <div id="dialog-1" title="Edit Event Description">
     <textarea id="evdesc" cols="25" rows="6"></textarea>
     <input type="button" value="Save Edits" id="saveBtn" title="Save Edits" /><br />
     <input type="button" value="Close" id="clsBtn" title="Close Dialog" />     
   </div>
   <input type="button" value="Close" onClick="google.script.host.close();" />
   </div>
 </body>
</html>

为了在不真正了解问题原因的情况下解决问题,我在对话框中添加了以下内容:

function openEventDescriptionEditDialog(evObj)
      console.log('openEventDescriptionEditDialog: idS=%s , text=%s',evObj.idS,evObj.text);    
      var alreadySent=false;//Added this to mitigate the problem
      $('#dialog-1').dialog(autopen:true,width:250,height:300);
      $('#dialog-1 #evdesc').val(evObj.text);
      $('#dialog-1 #saveBtn').button().click(function(e)
        e.preventDefault();
        console.log(e);//you will still see these on the console but only one saveEventDescription
        evObj.text=$('#dialog-1 #evdesc').val();
        if(!alreadySent)//Keeps the additional events from occuring
          saveEventDescription(evObj);
          alreadySent=true;
        
        //$(this).parent().dialog('close');
      );
      $('#dialog-1 #clsBtn').button().click(function(e)
        $(this).parent().dialog('close');
      );
    

所以我的问题是:真的需要消除对话框开关的抖动吗?

【问题讨论】:

在代码中的某处,您正在向相同元素添加新的事件侦听器以获取这些症状。在添加新侦听器之前尝试使用off() 我想这是因为我每次单击编辑按钮时都会执行此$('#dialog-1').dialog(autopen:true,width:250,height:300);。感谢您的评论。 我认为是其他按钮导致问题不是吗?多次执行$('#dialog-1 #clsBtn').button().click.. 每次都会在之前的侦听器之上添加一个新侦听器 您不需要多次这样做。初始化小部件一次。当你想打开对话框时,使用$('#dialog-1').dialog("open"); 我只是想用 open 代替。感谢您的建议 【参考方案1】:

(代题者发帖,移至答案区).

收到您的有用建议后,我对 html 文件进行了大部分更改,如下所示。重要的是不要重复运行初始化命令。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
      <script>
    var gEvObj=;
    $(function()
      dispEvents();
      $('#dialog-1').dialog(autoOpen: false, width: 250, height: 300, resizable: true, draggable: true);
      $('#dialog-1 #saveBtn').button().click(function(e)
        saveEventDescription();
      );
      $('#dialog-1 #clsBtn').button().click(function(e)
        $(this).parent().dialog('close');
      );
    );
    function dispEvents()
       console.log('dispEvents()');
      google.script.run
        .withSuccessHandler(upDateEvents)
        .getMyEvents();
    
    function upDateEvents(hl)
      $('#hotbox').html(hl);
    
    function editEventDescription(calId,evId,idS,evDesc)
      gEvObj=calId:calId,evId:evId,idS:idS,text:evDesc;
      $('#dialog-1 #evdesc').val(gEvObj.text);
      $('#dialog-1').dialog("open");
    
    function saveEventDescription()
      gEvObj.text=$('#dialog-1 #evdesc').val();
      google.script.run
      .withSuccessHandler(function()
        dispEvents();
        $('#dialog-1').dialog('close');
      )
      .saveMyEventDescription(gEvObj);
    
    console.log("My code");
  </script>
  <style>
    #dialog-1display:none;
    input[type="button"]background-color:#ffffff;border:1px solid #000;-webkit-appearance:none;
    #dialogs input[type="button"]margin:10px 0;
  </style>
  </head>
  <body>
  <div class="container">
   <div id="hotbox"></div>
   </div>
   <input type="button" value="Display Events" onClick="dispEvents();" />
   <div id="dialogs">
   <div id="dialog-1" title="Edit Event Description">
     <textarea id="evdesc" cols="25" rows="6"></textarea>
     <input type="button" value="Save" id="saveBtn" title="Save Edits" /><br />
     <input type="button" value="Close" id="clsBtn" title="Close Dialog" />     
   </div>
   <input type="button" value="Close" onClick="google.script.host.close();" />
   </div>
 </body>
</html>

然后我进入另一个程序并做了同样的事情,现在它也运行得非常顺利。

【讨论】:

以上是关于jQuery UI 对话框上的按钮是不是必须去抖动?的主要内容,如果未能解决你的问题,请参考以下文章

删除 jQuery UI 对话框小部件上的关闭按钮的最佳方法?

jQuery UI 对话框按钮图标

如何设置与不同按钮相关的jQuery UI对话框定位?

在框外单击鼠标时关闭 jQuery UI 对话框

jQuery中的去抖动功能

jquery ui Dialog:无法在初始化之前调用对话框上的方法