Question

我的代码正在做一些非常昂贵的事情 - 构建一大堆UI元素 - 所以我想显示一个对话框来说“请等待”。

这显然不起作用：

$(function () {

  $("#pleasewaitdialog").dialog({
    'modal': true,
    'autoOpen': false,
  });

  alert("test program started");

  // open the dialog
  $("#pleasewaitdialog").dialog("open");

  // simulate doing something expensive;
  for (var i=0; i<500000000; i++);

  // close the dialog
  $("#pleasewaitdialog").dialog("close");

  alert("test program ended");
});

UI不会更新，因为它阻止执行for循环。

我试过了：

$(function () {

  $("#pleasewaitdialog").dialog({
    'modal': true,
    'autoOpen': false,
  });

  alert("test program started");

  // open the dialog
  $("#pleasewaitdialog").dialog("open");

  setTimeout(function () {
    // simulate doing something expensive;
    for (var i=0; i<500000000; i++);

    // close the dialog
    $("#pleasewaitdialog").dialog("close");

    alert("test program ended");
  },1);
});

这实际上在Safari中工作正常（在JQueryUI对话框显示的两个警报之间。）但在Chrome（Mac的10.0.648.127）中，jQuery UI对话框不显示。 [更新：实际上，此解决方案有效。您需要确保在标记错误<title>标记的文档中没有它（请参阅下面的答案）]

Answer 1

如果由于某种原因您的<title>标记损坏，则jQueryUI（jQuery 1.5.1和jQueryUI 1.8.10）将不会在Chrome（10.0.648.127，Mac）中显示对话框。

以下代码在Safari中运行良好，但在Chrome中无效。

<html> 
  <head> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>  

    <script>

    $(function () {

      $("#pleasewaitdialog").dialog({
        'modal': true,
        'autoOpen': false,
      });

      alert("test program started");

      // open the dialog
      $("#pleasewaitdialog").dialog("open");

      setTimeout(function () {
        // simulate doing something expensive;
        for (var i=0; i<500000000; i++);

        // close the dialog
        $("#pleasewaitdialog").dialog("close");

        alert("test program ended");
      },1);
    });

    </script> 

    <!-- the broken close title tag here means that the
         jQuery dialog below won't display on Chrome -->
    <title>Test Dialog</tile>

  </head>

  <body>
     <div id="pleasewaitdialog" title="Please Wait">Reticulating Splines</div>
   </body>

</html>

当在主线程中执行长时间运行的事情时，如何让jQueryUI显示对话框？

1 个答案: