最初のものが終了したときに2番目のjavascriptを開始する

Question

私は進行状況バーで作業しています。それはラベルを持っています。特定のスクリプトが完了したらそのラベルを調整したい。考えられる解決策の答えを見つけた後、私は次のスクリプトを思いついた。最初は期待どおりに開始し、機能します。しかし、第2のものはそうではない。どうしたの？ここでは、コードです：

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>

Answer 2

おかげでジェームズ、それはそれです！ いくつかの並べ替えの後、これは2番目のスクリプトのように見えます。そして期待どおりに動作します。

<script> 
function finalize() {setTimeout(function(){ 
var elem = document.getElementById("myBar"); 
var myFunc02 = function() { 
      elem.innerHTML = 'Finalizing...'; 
}; 
myFunc02(); 
} 
, 600);} 
</script> 

Answer 3

コールバックを使用できます。コールバックは、完了時に実行される関数です。

function move(callback) { 
    //code you want to happen first 
} 
move(function(){ 
    //code you want to have happen after completion 
}) 

は、単純なコールバックが