GWT PopupPanel 未在正确的时间显示答案

【问题标题】：GWT PopupPanel not showing at the right timeGWT PopupPanel 未在正确的时间显示
【发布时间】：2014-03-11 16:54:31
【问题描述】：

我有一个通过单击按钮调用的函数，它需要很长时间才能创建并附加到 DOM 一些元素，所以我想在函数完成时显示一个带有“正在加载”图标的 PopupPanel它必须这样做。请注意，我的函数不会调用服务器，它只会在 UI 中创建一些需要很长时间来计算的元素，所以我没有 onSuccess() 事件或回调函数可以使用。

所以我有我的 PopupPanel：

pp = new PopupPanel();
pp.setTitle("loading....");
pp.setGlassEnabled(true);

然后在点击处理程序上我有以下代码：

public void onClick(ClickEvent event) {
  pp.show();
  functionWhichTakesaLongTimeToExecute();               
  pp.hide();
}

由于 JavaScript 是单线程的，我希望 PopUp 会出现，然后 functionWhichTakesaLongTimeToExecute() 执行，然后 PopUp 被隐藏，但发生的是 functionWhichTakesaLongTimeToExecute() 首先执行，需要很长时间才能将元素附加到DOM，只有在它完成它的工作之后才会显示然后隐藏 PopUp。就像代码一样：

functionWhichTakesaLongTimeToExecute(); 
pp.show();                  
pp.hide();

更困扰我的是，如果我在 pp.show() 之后添加 Window.alert("test") 这将中断流程，直到按下警报中的 OK 按钮，这会导致 PopUp 出现在之前警报和之前的函数WhichTakesaLongTimeToExecute() 被调用。所以下面的代码按预期工作：

pp.show();
Window.alert("test");
functionWhichTakesaLongTimeToExecute();                 
pp.hide();

有人可以向我解释为什么在调用函数WhichTakesaLongTimeToExecute() 之前不显示PopUp，而是“等待” functionWhichTakesaLongTimeToExecute() 执行，然后才显示它以及为什么添加 Window.alert ("test") 导致它正确显示？
PS：我在IE8和Chrome中都测试过代码，行为是一样的。

【问题讨论】：

标签： javascript gwt

【解决方案1】：

你可以这样做：

pp.show();
Scheduler.get().scheduleDeferred(new ScheduledCommand() {

    @Override
    public void execute() {
        functionWhichTakesaLongTimeToExecute();
        pp.hide();
    }
});

我在这里解释一下：GWT: Timer and Scheduler Classes

【讨论】：

作为旁注，我构建了一些非常复杂的 UI，它们的构建时间从不超过 100 毫秒。您可能想探索为什么您的 UI 需要这么长时间才能呈现。一定有一些方法可以优化它。
我尝试了您的代码，但没有成功。但是我设法使用 Timer 来做我需要的事情。定时器 tmr = new Timer() { @Override public void run() { functionWhichTakesaLongTimeToExecute(); pp.hide(); } } }; tmr.schedule(100);

【解决方案2】：

我在使用 setGlassEnabled 时也遇到了一些问题。您能否通过从代码中删除 setGlassEnabled(true) 行来检查它是否有效？

另外一件我碰巧注意到的事情是，您没有在 PopupPanel 中添加任何小部件。在 PopupPanel 的源代码中提到，您必须在调用 show 之前将子小部件附加到 PopupPanel 对象。 http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/client/ui/PopupPanel.java

请尝试这两种方法，如果其中任何一种有效，请告诉我。

【讨论】：

尝试使用添加到 PopupPanel 的标签和 setGlassEnabled(false)。仍然无法使用调度程序。但它适用于 Timer 类解决方法。