Javascript 使用BootstrapJS的Electron环境中的进度条工作不正常_Javascript_Node.js_Twitter Bootstrap_Electron

Javascript 使用BootstrapJS的Electron环境中的进度条工作不正常

javascript node.js twitter-bootstrap electron

Javascript 使用BootstrapJS的Electron环境中的进度条工作不正常,javascript,node.js,twitter-bootstrap,electron,Javascript,Node.js,Twitter Bootstrap,Electron,环境：用于UI的Electron 1.6.11（包括NodeJ）和Bootstrap 3.3.x 预期结果：我想：单击“运行”按钮时启动不确定的进度条运行一个进程（一个Java程序）——该进程成功运行当进程（Java程序）返回时，删除不确定的进度条我在以下代码中得到的是：进程（Java程序）启动该过程（Java程序）结束然后出现不确定的进度条（尝试时无法删除它--请参阅注释代码）可能是我没有正确同步处理。我认为NodeJS代码 resultCode = execSync(

环境：用于UI的Electron 1.6.11（包括NodeJ）和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>


window.$=window.jQuery=
require（'./node_modules/jquery/dist/jquery.min.js'）；
.进展{
利润率：15px；
}
.progress.progress-bar.active{
字号：500；
动画：进度条条纹1.5s线性无限；
}
跑




处理
$（文档）.ready（函数（）{
document.getElementById（'bar'）.style.display='none'；
});
函数runJob（）{
var execSync=require（'child_process'）。execSync；
var javaCmd='java-jarc:/java_Code/CountDown.jar'；
警报（“运行进程？”）；
//使进度条在此处可见，但不按作业顺序工作
document.getElementById（'bar'）.style.display='block'；
var结果码；
resultCode=execSync（javaCmd）；
//希望删除此处的进度条，但不起作用
//document.getElementById（'bar'）.style.display='none'；
警报（“命令成功执行”）；
}