jQuery对话框在打开前会调整大小，但对话框会以先前的宽度-高度打开

Question

我在侧边栏上单击按钮时正在使用jquery对话框打开屏幕。基本上，单击按钮后，将运行以下代码：

resizeDialog();
$("#dashboardContainer").dialog("open");

function resizeDialog() {
    var relativeDiv, relativeHeight, relativeWidth, relativeMy;

    if(myData.opening_type == 'full') {
        relativeDiv = '#sContainer';
        relativeWidth = '328';
        relativeMy = 'left top';

    } else {
        relativeDiv = '#cContainer';
        relativeMy = 'right top';

        var mqDesktop2 = window.matchMedia( "(min-width : 1500px) and (max-width : 1750px)" );
        var mqMobile = window.matchMedia( "(min-width:700px) and (max-width: 1500px)" );

        if(mqMobile.matches) {
            relativeWidth = '648';

        } else if(mqDesktop2.matches) {
            relativeWidth = '968';

        } else {
            relativeWidth = '1320';
        };
    }
    relativeHeight =  $(window).height() - ($("#cContainer").offset().top) - 20;

    $("#myDialog")
        .dialog( "option", "height", relativeHeight)
        .dialog( "option", "width", relativeWidth)
        .dialog( "option", "position", { my: relativeMy, at: "right top", of: relativeDiv, } );
}

但是，当我经常（一个接一个）单击按钮时，对话框将以其先前的大小打开。当我在打开对话框之前添加超时时，它将运行。但是我不想添加超时，因为必须立即打开对话框。您还可以建议其他解决方案吗？

Answer 1

我无法按照您的描述复制该问题。我创建了以下测试。

$(function() {
  function resizeDialog(dlg, w, h, cb) {
    dlg.dialog("option", {
      height: h,
      width: w
    });
    if (cb != undefined) {
      cb();
    }
  }
  $("[id^='dialog']").dialog({
    autoOpen: false
  });
  resizeDialog($("#dialog-1"), 200, 320, function() {
    $("#dialog-1").dialog("open");
  });
  resizeDialog($("#dialog-2"), 120, 120);
  $("#dialog-2").dialog("option", "position", {
    my: "left top",
    at: "left+10 top+10",
    of: window
  }).dialog("open");
})

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog-1" title="Basic dialog 1">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="dialog-2" title="Basic dialog 2">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

我能够按照与脚本类似的方式来调整它们的大小并open。我将添加一些检查以确保您获得了期望的相对值。