JavaFX按钮点击线程执行异常：图片修改与循环无法按序运行

问题描述 #

点击myButton后期望先完成按钮图片修改，再执行循环输出，但当前两个操作同时进行，添加join()方法也无法解决顺序问题，相关代码如下：

myButton.setOnMouseClicked(event -> {
    if (event.getButton() == MouseButton.PRIMARY) {
        Thread thread = new Thread(new Runnable() {
            @Override
            public void run() {
                ImageView imageView = new ImageView(image);
                imageView.setFitHeight(my_button_height - 16);
                imageView.setFitWidth(my_button_width - 16);
                myButton.setStyle("-fx-background-color: #ffffff00; ");
                myButton.setGraphic(imageView);
            }
        });
        thread.run();
        try {
            thread.join();
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }
        Thread thread1 = new Thread(new Runnable() {
            @Override
            public void run() {
                for (int i = 0; i < 15; i++){
                    System.out.println(i);
                    try {
                        Thread.sleep(500);
                    } catch (InterruptedException e) {
                        throw new RuntimeException(e);
                    }
                }
            }
        });
        thread1.run();
    }
});

问题根源 #

1. 线程启动错误：调用thread.run()只是在当前FX主线程中执行Runnable的代码，并没有真正启动新线程，后续的join()完全无效——因为根本没有异步线程需要等待。
2. UI操作线程违规：JavaFX的所有UI组件操作必须在FX应用线程（主线程）中执行，子线程直接修改myButton会触发线程安全问题，甚至可能导致程序崩溃。

解决方案 #

方案一：正确使用线程+UI线程调度

先启动线程处理图片准备工作，再通过Platform.runLater()将UI更新操作提交到FX主线程执行，确保UI更新完成后再启动循环线程：

myButton.setOnMouseClicked(event -> {
    if (event.getButton() == MouseButton.PRIMARY) {
        Thread thread = new Thread(() -> {
            // 子线程中仅做非UI的准备工作
            ImageView imageView = new ImageView(image);
            imageView.setFitHeight(my_button_height - 16);
            imageView.setFitWidth(my_button_width - 16);
            
            // 将UI更新操作提交到FX主线程，完成后启动循环线程
            Platform.runLater(() -> {
                myButton.setStyle("-fx-background-color: #ffffff00; ");
                myButton.setGraphic(imageView);
                
                Thread thread1 = new Thread(() -> {
                    for (int i = 0; i < 15; i++){
                        System.out.println(i);
                        try {
                            Thread.sleep(500);
                        } catch (InterruptedException e) {
                            throw new RuntimeException(e);
                        }
                    }
                });
                thread1.start(); // 用start()启动新线程
            });
        });
        thread.start(); // 启动准备线程
    }
});

方案二：简化逻辑（推荐）

因为图片修改属于轻量UI操作，直接在FX主线程中完成即可，无需额外线程，之后再启动循环线程：

myButton.setOnMouseClicked(event -> {
    if (event.getButton() == MouseButton.PRIMARY) {
        // 主线程直接完成UI修改
        ImageView imageView = new ImageView(image);
        imageView.setFitHeight(my_button_height - 16);
        imageView.setFitWidth(my_button_width - 16);
        myButton.setStyle("-fx-background-color: #ffffff00; ");
        myButton.setGraphic(imageView);
        
        // UI修改完成后启动循环线程
        Thread thread1 = new Thread(() -> {
            for (int i = 0; i < 15; i++){
                System.out.println(i);
                try {
                    Thread.sleep(500);
                } catch (InterruptedException e) {
                    throw new RuntimeException(e);
                }
            }
        });
        thread1.start(); // 启动新线程
    }
});

关键注意点 #

• 启动线程必须使用start()方法，而非run()——start()才会创建新的执行线程，run()只是普通方法调用。
• 所有JavaFX UI组件的修改操作，必须在FX应用线程中执行，子线程中的UI操作需通过Platform.runLater()提交到主线程。

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