計時器不會觸發“onclick”。在頁面加載時觸發-有解無憂

我正在嘗試自學編碼。我正在撰寫一個簡單的測驗。我希望我的計時器在“開始”時觸發，并最終在“下一個問題”時觸發。一旦頁面加載，我的計時器就會開始。不知道為什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button id="b1">Click Me!</button>
    <p id="demo"></p>
    <script>
        var sec = 5;
        var time = setInterval(myTimer, 1000);

        function myTimer() {
            document.getElementById("b1").onclick = function() {  
                 myTimer()  
            };  

            document.getElementById('demo').innerHTML = sec   "sec.";
            sec--;
            if (sec <= -1) {
                clearInterval(time);
                // alert("Time out!! :(");
                document.getElementById("demo").innerHTML="Time's up!";
            }
        }

嘗試了幾種不同的方法，包括“addEventListener”。似乎沒有任何效果。

uj5u.com熱心網友回復：

如果你看一個最小的例子，你會發現它也會在頁面加載后立即運行。在setInterval()頁面中加載腳本時呼叫此處。反過來，該run()函式每秒被呼叫一次。

var timerID = setInterval(run, 1000);

function run() {
    console.log("I'm running");
}

想想之間的差異var timer = run;和var timer = run()。第一個將函式分配run給timer。后者執行run()并分配回傳值。

這是帶有注釋的代碼：

var sec = 5;
// start interval timer and assign the return value "intervalID" to time
var time = setInterval(myTimer, 1000);

// to be called every second
function myTimer() {
    // assign an onclick handler to "b1" EVERY SECOND!
    document.getElementById("b1").onclick = function() {
        myTimer()
    };

    // update the demo DOM element with sec
    document.getElementById('demo').innerHTML = sec   "sec.";
    sec--;
    if (sec <= -1) {
        clearInterval(time);
        // alert("Time out!! :(");
        document.getElementById("demo").innerHTML="Time's up!";
    }
}

對于一個解決方案，我已經感動setInterval到onclick處理器和移動上述處理機分配出的myTimer功能，你只需要設定你的處理一次。

我還重命名time為timerID以明確它是什么。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <button id="b1">Click Me!</button>
    <p id="demo"></p>

    <script>
        var sec = 5;
        var timerID;

        document.getElementById("b1").onclick = function() {
            timerID = setInterval(myTimer, 1000);
        };

        function myTimer() {
            document.getElementById('demo').innerHTML = sec   "sec.";
            sec--;
            if (sec <= -1) {
                clearInterval(timerID);
                // alert("Time out!! :(");
                document.getElementById("demo").innerHTML="Time's up!";
            }
        }
    </script>
</body>
</html>

我會建議一些額外的練習來幫助你：

重置計時器，以便您可以單擊按鈕再次啟動計時器
防止在計時器運行時再次啟動計時器（這將運行多個具有不同 ID 的計時器）

uj5u.com熱心網友回復：

該myTimer（）函式永遠不會呼叫。即使您呼叫它，它也不會執行任何操作。它只是在點擊時重復自己。

所以，而不是：

function myTimer() {

document.getElementById("b1").onclick = function() { 
myTimer()  
};

嘗試添加一個事件監聽器：

 document.getElementById("b1").addEventListener('click', function() {  
 // inside here you put the code for going into next question
 })

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/335672.html

標籤：javascript 功能计时器

上一篇：使用字串Unity從游戲物件中獲取腳本

下一篇：通過vanillajavascript提交表單后，如何洗掉用戶在輸入標簽中輸入的輸入？