Question

环境：用于UI的电子1.6.11（包括NodeJS）和Bootstrap 3.3.x

期望的结果：

我想：

单击“运行”按钮时启动不确定的进度条
运行一个成功运行的进程（Java程序）
在进程（Java程序）返回时删除不确定的进度条

我在以下代码中得到的是：

进程（Java程序）启动
进程（Java程序）结束
然后出现不确定的进度条（尝试时我无法将其删除 - 请参阅注释代码）

可能，我没有正确同步我的处理。我想到了NodeJS代码

 resultCode = execSync(javaCmd);

将允许页面等待Java程序完成。我怀疑代码

var execSync = require('child_process').execSync;

正在后台创建一个子进程，即使我使用execSync也不会等待。

你能帮忙吗？

<!doctype html>
<html lang="en">
<head>

<script>
    window.$ = window.jQuery = 
    require('./node_modules/jquery/dist/jquery.min.js');
</script>

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

  <link href="light-bootstrap-dashboard-master/assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="light-bootstrap-dashboard-master/assets/css/animate.min.css" rel="stylesheet"/>

<style>
.progress {
    margin: 15px;
}

.progress .progress-bar.active {
    font-weight: 500;
    animation: progress-bar-stripes 1.5s linear infinite;
}

</style>
</head>

<body>
<div class="wrapper">
  <div class="container">
    <div class="form-check form-group">
    <button type="submit" class="btn btn-success btn-fill" onclick='runJob()'>Run</button>
    <br>
    <br>
      <div class="progress-bar progress-bar-striped active" id="bar" role="progressbar" style="width: 100%;">
        <span>Processing</span>
      </div>
    </div>
  </div>
</div>

<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        document.getElementById('bar').style.display = 'none';
    });
</script>

<script language='javascript' type="text/javascript">
    function runJob() {
        var execSync = require('child_process').execSync;
        var javaCmd = 'java -jar C:/Java_Code/CountDown.jar';
        alert("Run process?");

        // make progress bar visible here but does not work in sequence with job
        document.getElementById('bar').style.display = 'block';

        var resultCode;
        resultCode = execSync(javaCmd);

        // would like to remove progress bar here but does not work
        //document.getElementById('bar').style.display = 'none';

        alert("Command succesfully executed");
  }
</script>
</body>

<!-- Core JS Files   -->
<script src="light-bootstrap-dashboard-master/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="light-bootstrap-dashboard-master/assets/js/bootstrap.min.js" type="text/javascript"></script>

</html>

使用BootstrapJS无法正常工作的电子环境中的进度条

0 个答案: