javascript - 第一个 JavaScript 完成后启动第二个 JavaScript

Question

我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后，我想出了以下脚本。第一个启动并按预期工作。然而，第二个却没有。它出什么问题了？代码如下:

HTML:
<form method ="post">
    <input class=generate type="submit" value="Upload" onclick="move();finalize()"/>
</form>

Javascript:
<script>
function move() {
    var elem = document.getElementById("myBar");   
    var myFunc01 = function() {
    var i = 1;
    while (i < 101) {
        (function(i) {
            setTimeout(function() {
                i++; 
                elem.style.width = i + '%';
                elem.innerHTML = i + '%';
            }, 600 * i)
        })(i++)
    }
    };
    myFunc01();
}
</script>
<script>
function finalize() {
    var elem = document.getElementById("myBar"); 
    var myFunc02 = function() {
                elem.innerHTML = 'Finalizing...';
    };
    setTimeout(myFunc02, 600);
}
</script>

Answer 1

var elem = document.querySelector('#myBar');

function done() {
  elem.innerText = 'UPLOAD HAS FINISHED';
}

var upload = function(callback) {

  var width = 1;
  var id;

  var frame = function() {
    if (width >= 100) {
      clearInterval(id);
      callback();
    } else {
      width++;
      elem.style.width = width + '%';
    }
  };

  id = setInterval(frame, 10);
};

/*
upload(function() {
  elem.innerText = 'UPLOAD HAS FINISHED';
});
*/

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: green;
  text-align: center;
  line-height: 27px;
}

<button onclick="upload(done)">START UPLOAD</button>

<div id="myProgress">
  <div id="myBar"></div>
</div>