当长时间在主线程中执行某些操作时，如何让jQueryUI显示对话框？

Question

My code is doing something very expensive - building a whole bunch of UI elements - so I want to display a dialog to say to "Please wait". 我的代码做的事情非常昂贵-构建了一堆UI元素-因此我想显示一个对话框，说“请稍候”。

This, obviously, doesn't work: 显然，这不起作用：

$(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");
});

The UI won't update because it's blocked doing the for loop. 用户界面不会更新，因为它被阻止执行for循环。

I tried this: 我尝试了这个：

$(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);
});

And that actually works fine in Safari (between the two alerts the JQueryUI dialog shows.) But in Chrome (10.0.648.127 for Mac) the jQuery UI dialog doesn't display. 而且在Safari中实际上效果很好（在JQueryUI对话框显示的两个警报之间。）但是在Chrome浏览器（对于Mac为10.0.648.127）中，jQuery UI对话框不显示。 [Update: Actually, this solution works. [更新：实际上，此解决方案有效。 You need to make sure you don't have it in a document with a broken <title> tag mind (see answers below)] 您需要确保您的文档中没有<title>标签损坏的文档（请参见下面的答案）]

Answer 1

jQueryUI (jQuery 1.5.1 and jQueryUI 1.8.10) won't display a dialog in Chrome (10.0.648.127, Mac) if you have a broken <title> tag for some reason. 如果出于某些原因您的<title>标记损坏，则jQueryUI（jQuery 1.5.1和jQueryUI 1.8.10）在Chrome（10.0.648.127，Mac）中不会显示对话框。

The following code works fine in Safari, but doesn't work in Chrome. 以下代码在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 个解决方案

解决方案1
4 2011-03-09 14:50:24

当长时间在主线程中执行某些操作时，如何让jQueryUI显示对话框？

问题描述

1 个解决方案

解决方案1 4 2011-03-09 14:50:24

解决方案1
4 2011-03-09 14:50:24