gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 18:33:55 26 4
gpt4 key购买 nike

我的代码正在做一些非常昂贵的事情 - 构建一大堆 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(10.0.648.127 for Mac)中,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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com