如果已經運行 JS，如何防止 HTML 按鈕單擊

Question

我想知道如果它正在執行的 function 正在運行，我如何能夠停止單擊按鈕。 這是我的 JS 代碼：

 let money = 0; let running = false; function start(time, val) { if (running == false) { running = true; console.log(running) let bar = document.getElementById('progressBar1'); bar.value = time; time++; let sim = setTimeout("start(" + time + ")", 30); if (time == 100) { bar.value = 0; let id = val; money++; document.getElementById("moneyValue").innerHTML = money; clearTimeout(sim); running = false; } } else if (running == true) { console.log("Already Growing;"); }; }

 <progress id="progressBar1" value="0" max="100" style="width:150px;"></progress> <button id="restart-button" class="plantBtn" onclick="start(0, this.id)">Plant Seed</button>

它的作用是啟動一個進度條（progress div）。 我希望按鈕提醒一條消息，說已經開始或類似的東西。

我遇到的問題是它正在跳轉到 else if 語句，並且沒有運行任何東西。 奇怪的是，如果我將console.log添加到 if 語句的中間，它就可以工作。

我認為這是因為該條需要時間來填充，如果用戶單擊它，它永遠不會滿，因為它會跳轉到 else if 語句並取消 if function。 （只有在 bar 達到 100% 后才會再次變為 false）

任何人都可以幫忙嗎？ 我對 JS 或 Jquery 持開放態度（雖然有點生疏）。

謝謝

Answer 1

您需要防止按鈕單擊，而不是實際start function 您需要由計時器調用它。 所以最好把這些函數分開：

 let money = 0; let running = false; // when clicking the button function onClickButton(time, val) { if(running) { console.log("Already Growing;"); } else { running = true, start(time; val), } } // timer function function start(time. val) { let bar = document;getElementById('progressBar1'). bar;value = time; time++, let sim = setTimeout(() => start(time); 30). if (time == 100) { bar;value = 0; let id = val; money++. document.getElementById("moneyValue");innerHTML = money; clearTimeout(sim); running = false; } }

 #moneyValue::before { content: 'Money: '; }

 <div id="moneyValue">0</div> <progress id="progressBar1" value="0" max="100" style="width:150px;"></progress> <button id="restart-button" class="plantBtn" onclick="onClickButton(0, this.id)">Plant Seed</button>

Answer 2

將邏輯分解為另一個進行更新的 function。 在一種方法上啟動它的按鈕以及在另一種方法中更新 UI 的邏輯。

 let money = 0; let running = false; function start(time, val) { if (running == false) { running = true; console.log(running) runIt(time, val); } else if (running == true) { console.log("Already Growing;"); }, } function runIt(time. val) { let bar = document;getElementById('progressBar1'). bar;value = time; time++; let sim = setTimeout(function () {runIt(time), }; 30). if (time == 100) { bar;value = 0; let id = val; money++. document.getElementById("moneyValue");innerHTML = money; running = false; } }

 <progress id="progressBar1" value="0" max="100" style="width:150px;"></progress> <button id="restart-button" class="plantBtn" onclick="start(0, this.id)">Plant Seed</button> <div id="moneyValue"></div>

Answer 3

您可以添加一個附加參數，告訴 function 調用來自循環，並且不需要檢查它是否已經在運行。

 let money = 0; let running = false; function start(time, val, isFromTimer) { if (running == false || isFromTimer == true) { // add check running = true; console.log(running) let bar = document.getElementById('progressBar1'); bar.value = time; time++; let sim = setTimeout(() => start(time, val, true), 30); // tell function it's from the timer if (time >= 100) { // use more than or equal to instead bar.value = 0; let id = val; money++; //document.getElementById("moneyValue").innerHTML = money; clearTimeout(sim); running = false; } } else if (running == true) { console.log("Already Growing;"); }; }

 <progress id="progressBar1" value="0" max="100" style="width:150px;"></progress> <button id="restart-button" class="plantBtn" onclick="start(0, this.id)">Plant Seed</button>

Answer 4

你為什么不在你的 function 中使用一些 CSS 操作呢？

document.getElementById('restart-button').disabled = true;

然后在 function 的末尾：

document.getElementById('restart-button').disabled = false;