javascript - 如何在单击按钮时设置 Vaadin 8 LoadingIndicatorConfiguration

Question

我正在使用 Vaadin 8，LoadingIndicator 给我带来了一些问题。在 90% 的时间里，我需要相应地设置它:

• 第一次延迟 == 300 毫秒
• 第二次延迟 == 600 毫秒
• 第三个延迟 == Integer.MAX

但对于一些特定的操作，我需要修改它，以便立即显示 Overlay(加载指示器)，而不是等待预先配置的 300 毫秒。例如，当我点击一个按钮时，我希望它立即显示出来。然而，这是有问题的，因为如果我在按钮单击事件的处理过程中将第一个延迟设置为零，它只会在事件完成后应用。出于这个原因，我想执行一些 JS 方法，将这个延迟设置为零。我试过直接调用JS方法来立即显示叠加层，但它仍然受到LoadingIndicatorConfiguration的影响。

编辑:目前，我想出的可行(不是最佳)解决方案是创建一个模仿 v-loading-indicator 的 CSS 类，并创建一个添加 的 JavaScript 方法在 body 元素的开头添加 code>div 元素，然后将此 CSS 类添加到 div 元素。然后在创建按钮时，我在这个 div 上执行(再次使用 JS - 这很关键)addEventListener 并添加显示加载指示器的方法。

Answer 1

通常，浏览器中的 UI 仅在请求已完全处理后才会更新。因此，在单击按钮之前设置延迟有效，但在单击后完成时则无效。要更改此设置，您需要启用推送以立即更新 UI。在使用和不使用 Push 的情况下尝试以下代码，您应该会看到加载指示器行为的差异。

@Push
public class DemoUI extends UI {

    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();

        Button loadingButton = new Button();
        loadingButton.addClickListener(e -> {
            getLoadingIndicatorConfiguration().setFirstDelay(0);
            getLoadingIndicatorConfiguration().setSecondDelay(1000);
            getLoadingIndicatorConfiguration().setThirdDelay(2500);
            try {
                Thread.sleep(5000);
            } catch (InterruptedException e1) {
        });
        layout.addComponent(button);
        setContent(layout);
    }
}

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = DemoUI.class)
public static class Servlet extends VaadinServlet {
}