计时器不会触发"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">

如果您看一个最小的例子，您会发现这也在页面加载后立即运行。在这里，当脚本加载到页面中时调用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的计时器)，而计时器正在运行

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
})

或者使用相同的代码，但不是在函数中，并且其内容是导致下一个答案的有意义的代码:

document.getElementById("b1").onclick = function() { 
// code to proceed into next question
}

相关内容

最新更新

热门标签：