javascript - 一次显示一个元素

Question

我有一个 javafx 应用程序，用于对用户上传的文件进行签名。并分别显示这些文件的名称。

问题是，为了在屏幕上显示文件，它需要等待所有文件都被签名。所有文件签名后，突然显示所有文件。

以下 gif 显示当前状态:

Displayed Files GIF

但我想以不同的方式显示它们。因此，每个文件都应该等待前一个文件显示，然后再开始签名过程。这就像一次显示一个元素(但不使用 setInterval 或 setTimeout)。换句话说，我想让Java和Javascript互相通信。

我在java端使用for循环。在此 for 循环中，我调用 javascript 函数以在 div 中显示文件名。

Java代码:

List<String> files = new ArrayList<String>();

for ( Iterator<File> iterator = fWrapper.getFiles().iterator(); iterator.hasNext(); ) {
    File unsignedFile = iterator.next();
    String targetFileStr = targetPath + "/" + unsignedFile.getName();
    File signedFile = signer.signUDF(unsignedFile);
    files.add(targetFileStr);

    signedFile.renameTo(new File(targetFileStr));

    Browser.webEngine.executeScript("signedSuccessfully('" + unsignedFile.getName() + " is signed.')"
}

Javascript 代码:

 function signedSuccessfully(msg) {
     $("#statusText").append('<br><span style="color:green"> - ' + msg + '</span>');
 }

有人可以给我一些建议吗？

提前谢谢您。

Answer 1

在后台线程中运行签名，并使用 Platform.runLater(...) 每次在 FX 应用程序线程上更新 UI

由于您正在列表中收集文件名，我假设您在该过程完成后需要它。您可以为此使用 Task 并使用 onSucceeded 处理程序在任务完成后执行代码。

Task<List<String>> signingTask = new Task<List<String>>() {
    @Override
    public List<String> call() throws Exception {
        List<String> files = new ArrayList<String>();

        for (File unsignedFile : fWrapper.getFiles()) {
            String targetFileStr = targetPath + "/" + unsignedFile.getName();
            File signedFile = signer.signUDF(unsignedFile);
            files.add(targetFileStr);

            signedFile.renameTo(new File(targetFileStr));

            Platform.runLater(() -> Browser.webEngine.executeScript("signedSuccessfully('" + unsignedFile.getName() + " is signed.')"));
        }
        return files ;
    }
};

signingTask.setOnSucceeded(e -> {
    // this is executed on the FX Application Thread when the task completes successfully
    List<String> signedFiles = signingTask.getValue();
    // do something with signedFiles...
});

signingTask.setOnFailed(e -> {
    Throwable exception = signingTask.getException();
    // this is executed on the FX Application Thread if the task throws an exception
    // inform user something went wrong, etc...
});

Thread t = new Thread(signingTask);
t.start();