開始第二個JavaScript時，第一個完成

我正在進度條上工作。它有一個標籤。我想調整某個腳本完成的標籤。在找到可能解決方案的一些答案之後，我想出了以下腳本。第一次啓動並按預期工作。但是，第二個不是。它出什麼問題了？下面的代碼：開始第二個JavaScript時，第一個完成

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>

來源

2017-06-05 Pieter

腳本的加載順序是無關的功能執行的邏輯順序的基本思想。到按鈕被點擊的時候，所有東西都已經加載了。您應該在匿名setTimeout函數的最後一次執行中調用finalize。 – James

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>

來源

2017-06-05 20:41:07

感謝詹姆斯，這就是它！經過一些重新安排後，這是第二個腳本的樣子。它按預期工作。

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

來源

2017-06-05 20:46:32 Pieter

您可以使用回調。回調是一個完成後運行的函數。

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

這就是一個簡單的回調是如何工作的

來源

2017-06-05 20:51:56

開始第二個JavaScript時，第一個完成

回答

相關問題