javascript - 当主线程中执行长时间运行的内容时,如何让 jQueryUI 显示对话框?

标签 javascript jquery jquery-ui

我的代码正在做一些非常昂贵的事情 - 构建一大堆 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> 的文档中。标记头脑(见下面的答案)]

最佳答案

如果 <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>

关于javascript - 当主线程中执行长时间运行的内容时,如何让 jQueryUI 显示对话框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5246259/

相关文章:

jquery - 突出显示重音字符

jquery - 具有可调整大小部分的页面布局(是否使用 Jquery、Rails 插件)

javascript - 用于媒体查询的 jQuery 调整大小功能

javascript - 正则表达式没有捕获我的整个选择

javascript - d3.dispatch() 未按预期工作

javascript - 如何在多个原型(prototype)函数之间正确共享变量?

javascript - 通过id将json数组合并为一个json数组

javascript - Socket.io双室

javascript - JqueryUI Datepicker无法正确处理初始值

javascript - Jquery UI 可排序占位符未显示在阻止列表中