如何阻止用户界面长期运行的JavaScript循环
问题描述:
我需要做的这个帖子的对立面,“Best way to iterate over an array without blocking the UI”如何阻止用户界面长期运行的JavaScript循环
我通过数百行必须循环,并为每一个值。但是,在我允许用户执行下一步并将更新的行提交到数据库之前,该工作必须完成。
JavaScript代码如下。
// toolbar events/actions
changeZeroDiscountButton.click(function (event) {
var value = discountComboBox.jqxComboBox('val');
if ((value != null) && (value != "")) {
value = value/100;
// get all the rows (this may have to be changed if we have paging
var datainformations = $('#jqxgrid').jqxGrid('getdatainformation');
var rowscounts = datainformations.rowscount;
for (var i = 0; i < rowscounts; i++) {
var preSetDiscount = $("#jqxgrid").jqxGrid('getcellvalue', i, "discount");
if (preSetDiscount == .0000) {
$("#jqxgrid").jqxGrid('setcellvalue', i, "discount", value);
}
}
}
});
答
JavaScript的设计,因此不会阻止任何方式的用户界面,这也是其最重要的特点之一浏览器。唯一的例外是弹出消息框(即alert()
,confirm()
和propmpt()
)。即使有可能,也不建议阻止用户界面。
有很多替代方法可以防止用户发起不应该被解雇的行为,直到发生其他事情。示例:
- 禁用操作按钮,直到您的处理结束然后启用它。
- 设置一个标志(例如
var processing = true
)并在动作按钮的单击事件中检查该标志,以便在标志为true
时显示消息(例如“仍在处理中,请稍候......”),并在标志执行时执行动作是false
。切记不要使用alert()
作为消息,否则您将阻止处理。改为使用弹出式div
。 - 将处理开始时的事件处理程序设置为显示消息的函数(例如“仍在处理中,请稍候...”),并在处理结束时将事件处理函数设置为将会做这个动作。切记不要使用
alert()
作为消息,否则您将阻止处理。改为使用弹出式div
。 - 在处理开始时显示一个模式弹出框
div
,并显示一条消息(例如“仍在处理中,请稍候...”)或进度条或某种动画。模式弹出框阻止用户与页面进行交互,因此他们无法点击任何内容。为此,模式弹出窗口不得有关闭按钮或任何其他方式关闭它。在处理结束时,关闭模式弹出框,以便用户现在可以继续。
重要提示:您在您的评论中提到的其他答案的覆盖(这是我的最后一点类似模式弹出)不显示,直到处理结束。这是因为你的处理正在占用处理器并阻止它处理UI线程。当你可以做的是延迟你的处理。因此,首先显示模式弹出窗口(或覆盖图),然后使用setTimeout()
在1秒后开始处理(也许500毫秒或更少就足够了)。这使处理器有足够的时间来处理UI线程,然后开始进行长时间处理。
编辑这里是最后的方法的一个示例:
function start() {
disableUI();
setTimeout(function() {
process();
}, 1000);
}
function process() {
var s = (new Date()).getTime();
var x = {};
for (var i = 0; i < 99999; i++) {
x["x" + i] = i * i + i;
}
var e = new Date().getTime();
$("#results").text("Execution time: " + (e - s));
enableUI();
}
function disableUI() {
$("#uiOverlay").dialog({
modal: true,
closeOnEscape: false,
dialogClass: "dialog-no-close",
});
}
function enableUI() {
$("#uiOverlay").dialog("close");
}
.dialog-no-close .ui-dialog-titlebar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<button type="button" onclick="start()">Start</button>
<div id="results"></div>
<div id="uiOverlay" style="display: none;">Processing... Please wait...</div>
编辑2这里是第三方法的一个例子:
$("#StartButton").on("click", start);
function start() {
//remove all previous click events
$("#StartButton").off("click");
//set the click event to show the message
$("#StartButton").on("click", showProcessingMsg);
//clear the previous results
$("#results").text("");
setTimeout(function() {
process();
}, 1000);
}
function process() {
var s = (new Date()).getTime();
var x = {};
for (var i = 0; i < 99999; i++) {
x["x" + i] = i * i + i;
}
var e = new Date().getTime();
$("#results").text("Execution time: " + (e - s));
//remove all previous click events
$("#StartButton").off("click");
//set the click event back to original
$("#StartButton").on("click", start);
}
function showProcessingMsg() {
$("#results").text("Still processing, please wait...");
}
.dialog-no-close .ui-dialog-titlebar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="StartButton">Start</button>
<div id="results"></div>
你使用引导? – jonju
Sorta。它是Joomla组件的一部分,Joomla支持一些Bootstrap功能。 – NJA