javascript - Jquery 对话框 afterOpen 事件

Question

我正在尝试使用 jquery dialog作为“请稍候”消息。这通常有效，但此特定任务是 CPU 密集型任务，并且会在异步对话框打开之前卡住。我尝试将任务附加到对话框中的“打开”事件，但打开事件和“焦点”事件在对话框打开之前触发

$("#dialogbox").dialog({
    autoOpen:false,
    modal:true,
    title: "Use of Open event",
    width:300,
    open: function( event, ui ) {
        alert('hello open');
    },
     focus: function( event, ui ) {
        alert('hello focus');
    }
});

$('#mybutt').click(function() {
    $('#dialogbox').html('<h2>Watch this</h2>An alert box should have opened');
    $('#dialogbox').dialog('open');
});

fiddle me

有什么建议吗？

Answer 1

您可以使用setTimeout(fn, 0);重新排队执行。正如您在示例中看到的，“hello focus”出现在“hello open”之前。

$("#dialogbox").dialog({
    autoOpen:false,
    modal:true,
    title: "Use of Open event",
    width:300,
    open: function( event, ui ) {
        setTimeout(function(){alert('hello open');}, 0);
    },
     focus: function( event, ui ) {
        alert('hello focus');
    }
});

$('#mybutt').click(function() {
    $('#dialogbox').html('<h2>Watch this</h2>An alert box should have opened');
    $('#dialogbox').dialog('open');
});

<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/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="dialogbox"></div>
<input id="mybutt" type="button" value="Click Me">