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 так же, как ваш скрипт. Я бы добавил несколько проверок, чтобы убедиться, что вы получаете ожидаемые относительные значения.