我正在用 HTML5 Javascript 創建一個類似點擊器的游戲，對于點擊部分，有一個超時......我自己嘗試過，但由于某種原因它不起作用。HTML：
function pursuit() {
var btn = document.getElementById("pursuit");
setInterval(function(){
timeOnPursuit -= 1;
}, 1000)
while(timeOnPursuit > 0){
btn.value = "In Pursuit: " timeOnPursuit;
}
}<div class="button">
<button id="pursuit" class="pursuit" onClick="pursuit()"> Go on a Pursuit </button>
</div>uj5u.com熱心網友回復：
這里需要考慮一些事情......
首先，代碼在瀏覽器控制臺中產生錯誤。您從未定義過該timeOnPursuit變數，因此您并沒有真正控制其范圍。在嘗試使用它之前，只需使用初始值（您喜歡的任何值）宣告該變數：
var timeOnPursuit = 10;
除此之外，您的回圈將阻塞執行緒。因為變數最初大于 0，并且因為該回圈中沒有任何內容修改該值，所以它將永遠運行并且永遠不會讓間隔有機會修改該值。
完全擺脫回圈并依賴間隔。在此時間間隔內，您可以更新 UI。（順便說一句，在這種情況下，可能應該是innerText而不是value。）然后在該間隔內，您還可以檢查何時停止該間隔，這就是我懷疑您試圖對回圈執行的操作。
作為獎勵，您可能還想禁用該按鈕，以便用戶無法再次單擊它，這會創建另一個計數器。
總的來說，可能是這樣的：
function pursuit() {
var btn = document.getElementById("pursuit");
// Start the "pursuit"
var timeOnPursuit = 10;
btn.innerText = "In Pursuit: " timeOnPursuit;
btn.disabled = true;
// Repeat every second
var interval = setInterval(function(){
// Update the "pursuit"
timeOnPursuit -= 1;
btn.innerText = "In Pursuit: " timeOnPursuit;
// Stop the interval at 0
if (timeOnPursuit <= 0) {
clearInterval(interval);
}
}, 1000)
}<div class="button">
<button id="pursuit" class="pursuit" onClick="pursuit()"> Go on a Pursuit </button>
</div>uj5u.com熱心網友回復：
function pursuit() {
let timeOnPursuit = 10 // define time
var btn = document.getElementById("pursuit");
const timer = setInterval(function() {
console.log(timeOnPursuit)
if (timeOnPursuit > 0) {
btn.innerHTML = "In Pursuit: " timeOnPursuit;
timeOnPursuit -= 1; // reduce time
} else {
btn.innerHTML = "Pursuit";
clearInterval(timer) // stop the timer
}
}, 1000)
}<div class="button">
<button id="pursuit" class="pursuit" onClick="pursuit()"> Go on a Pursuit </button>
</div>uj5u.com熱心網友回復：
我打算寫很多大衛寫的東西，所以現在看起來有點多余。相反，這里有一種替代方法，它使用setTimeout代替setInterval.
// Cache the element and add a click listener to it
// (no need for inline JS)
const btn = document.querySelector(".pursuit");
btn.addEventListener('click', pursuit, false);
function pursuit() {
// Initialise timeOnPursuit
function loop(timeOnPursuit = 10) {
// Display the button text, and disable the button
btn.innerText = `In Pursuit: ${timeOnPursuit}`;
btn.disabled = true;
// If timeOnPursuit is greater than zero
// call loop again with a a decremented timeOnPursuit
if (timeOnPursuit > 0) {
setTimeout(loop, 1000, --timeOnPursuit);
}
}
// Call the loop function
loop();
}<div class="button">
<button class="pursuit"> Go on a Pursuit </button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361092.html
標籤：javascript html