必须使用 DelayedTask 否则 LoadMask 不显示答案

【问题标题】：Having to use DelayedTask otherwise LoadMask doesn't show必须使用 DelayedTask 否则 LoadMask 不显示
【发布时间】：2015-10-09 07:25:41
【问题描述】：

我正在做一些需要时间的过程，所以我希望能够显示一个面具，我使用 LoadMask。问题是我想要运行的代码似乎运行得太快了，我认为它阻止了 UI 以显示掩码。该过程大约需要 4 秒，所以我知道掩码不会同时启用和禁用。

我解决这个问题的方法是使用延迟任务，但感觉有点像代码味道。

我可以换一种方式吗？

这就是我所拥有的

    var myMask = new Ext.LoadMask(win, {});
    myMask.show();

    var task = new Ext.util.DelayedTask(function () {

         ....... // DO MY stuff and eventually do a myMask.hide()

    task.delay(400);

效果很好，但我想知道这是否是正确的方法？

如果我删除了延迟任务，那么掩码似乎永远不会显示，但该过程确实有效。

【问题讨论】：

您能否为您的任务添加代码，包括 myMask.hide()？
你的 4 秒任务是什么？ REST 方法调用？
我会为这些进程使用通用回调，并且全局计数器等于进程数。在回调中减少这个计数器。一旦计数器为 0，就隐藏掩码。在 ExtJs 6 中有用于这些目的的承诺，但正如我所见，这不是你的情况。
感谢大家的cmets。所以现在看来我做得对，直到我升级到更高版本的 Extjs

标签： extjs extjs4 extjs4.1 extjs4.2 extjs5

【解决方案1】：

假设您的“过程”是某种本地顺序过程，那么您上面所说的非常正确。如果您的代码正在运行一个繁忙的循环，它不会将控制权交给 UI“线程”以供浏览器重绘。

所以你不会在这里看到面具；

mask();
busyLoop();
unmask();

但如果你这样做：

mask();
setTimeout(function() {
    busyLoop();
    unmask();
}, 1);

它让浏览器有时间在你进入你的东西之前进行绘制。

【讨论】：