如何阻止 UI 长运行 Javascript 循环

Question

我需要做相反的事情 post, "Best way to iterate over an array without blocking the UI"

我必须遍历数百行并为每一行设置一个值。但是在我允许用户执行下一步并将更新的行提交到数据库之前，该工作必须完成。

下面是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);
            }
        }
    }

});

Answer 1

如果它是一个长循环浏览器本身将阻止所有其他事件。您可能会遇到冻结浏览器的情况。

那不会是一个好的体验。

您可以像这样用 Overlay 覆盖 UI 并通知用户操作

Answer 2

JavaScript 的设计使其不会以任何方式阻止 UI，这是浏览器最重要的功能之一。唯一的例外是弹出消息框（即 alert()、confirm() 和 propmpt()）。即使可能，也强烈建议不要阻止 UI.

有许多替代方法可以防止用户触发在其他事情发生之前不应触发的操作。示例：

禁用操作按钮，直到您的处理结束，然后再启用它。
设置一个标志（例如 var processing = true）并在操作按钮的单击事件中检查该标志，以便在标志为 true 时显示一条消息（例如 "still processing, please wait..."）并且当标志为 false 时执行操作。请记住不要对消息使用 alert() ，否则您将阻止处理。请改用弹出窗口 div。
在处理开始时将事件处理程序设置为显示消息的函数（例如 "still processing, please wait..."），并在处理结束时将事件处理程序设置为将执行操作的函数.请记住不要对消息使用 alert() ，否则您将阻止处理。请改用弹出窗口 div。
在处理开始时使用消息（例如 "still processing, please wait..."）或进度条或一些动画显示模态弹出窗口 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>

如何阻止 UI 长运行 Javascript 循环

How to block the UI for a long running Javascript loop

javascript

user-interface

for-loop

blocking

如何阻止 UI 长 运行 Javascript 循环

How to block the UI for a long running Javascript loop

javascript

user-interface

for-loop

blocking

如何阻止 UI 长运行 Javascript 循环