如何在Vaadin Web应用中实现步骤间的短暂暂停

你当前写法不生效的核心原因是：Vaadin的按钮点击事件默认在服务端HTTP请求处理线程中同步执行，你在这个线程里调用Thread.sleep会直接阻塞整个请求响应流程——浏览器会一直等待服务端返回最终结果，期间收不到任何中间状态的UI更新，等所有排序逻辑、所有sleep都执行完成后，服务端才会把最终的数组状态一次性返回给前端，自然只会看到长时间加载后直接展示最终结果。

1. 开启服务端推送能力 #

在你的MainView类上添加@Push注解，允许服务端在请求响应完成后，主动把UI变更推送到前端，这是异步更新UI的前提。

import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.shared.ui.Push;
// 其他导入省略

@Push // 必须加这个注解开启推送
@Route("")
public class MainView extends VerticalLayout {
    // 原有成员变量保留，比如柱状图组件、待排序数组arr
    private final int[] arr = new int[20];
    private volatile boolean sorting = false; // 防止重复触发排序
    
    // 原有UI初始化代码保留
}

2. 把排序逻辑移到独立异步线程执行 #

不要占用HTTP请求处理线程跑排序和延迟，点击按钮后立刻返回响应给浏览器，排序逻辑放到自定义线程里跑，每完成一步交换就主动推送UI更新，再在自定义线程里做步骤延迟。
修改按钮点击事件和排序相关代码如下：

buttonBeginSort.addClickListener(e -> {
    if (sorting) return; // 排序运行中不重复触发
    sorting = true;
    buttonBeginSort.setEnabled(false);
    UI ui = UI.getCurrent(); // 提前拿当前UI实例引用，异步线程中使用

    // 开独立线程跑排序，不阻塞请求线程
    new Thread(() -> {
        try {
            for (int i = 0; i < arr.length - 1; i++) {
                for (int j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        // 交换数组元素
                        int temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;

                        // 拿到UI锁，更新柱状图展示
                        ui.access(() -> {
                            // 这里替换成你原来的刷新柱状条渲染的逻辑
                            refreshBarDisplay();
                        });

                        // 延迟在自定义线程中执行，不会阻塞请求和UI推送
                        Thread.sleep(500);
                    }
                }
            }
        } catch (InterruptedException ex) {
            Thread.currentThread().interrupt();
        } finally {
            // 排序完成后恢复按钮状态
            ui.access(() -> {
                sorting = false;
                buttonBeginSort.setEnabled(true);
            });
        }
    }).start();
});

• 所有非Vaadin请求线程内的UI修改操作，必须包裹在ui.access(Runnable)代码块中执行，否则会触发线程安全异常，导致UI状态不同步
• 不要在任何Vaadin自带的事件监听、组件渲染回调线程里调用sleep，这类线程负责处理前端请求，阻塞后会直接导致页面加载卡住
• 如果部署时用了Nginx等反向代理，需要调整代理的长连接超时时间，避免推送连接被提前中断
• 如果需要实现排序终止、暂停功能，可以新增volatile类型的标志位，在每次循环前判断标志状态即可，不要强行终止运行中的排序线程

内容的提问来源于stack exchange，提问作者CM9