javascript - GWT PopupPanel 没有在正确的时间显示

Question

我有一个点击按钮调用的函数，它需要很长时间来创建和附加到 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(); 

有人可以向我解释为什么在调用 functionWhichTakesaLongTimeToExecute() 之前不显示 PopUp 而是它“等待”functionWhichTakesaLongTimeToExecute() 执行并且仅在执行之后才显示它，以及为什么添加 Window.alert ("test") 使其正确显示？
PS:我已经在 IE8 和 Chrome 中测试了代码，行为是一样的。

Answer 1

这是你可以做到的:

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

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

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