How do I get jQueryUI to display a dialog when something long running is executing in the main thread?_问答_开发者

How do I get jQueryUI to display a dialog when something long running is executing in the main thread?

开发者 https://www.devze.com 2023-02-16 05:37 出处：网络

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\".

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".

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.

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. [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)]

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.

The following code works fine in Safari, but doesn't work in 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>