计时器自动启动，而不是在 JavaScript 中按下按钮

Question

我对javascript很陌生，所以答案可能很容易，但无论如何

我正在尝试进行简单的点击速度测试，但是当用户按下单击我按钮时，我无法启动计时器，所以我只能自动启动它。 如果有人可以帮助我在按下按钮时启动它，将不胜感激

网页代码：

<button id="click2" onclick="click2()">Click Me!</button><br>
<span id="clicksamount">0 Clicks</span><br><br>
<span id="10stimer">10s</span>

JS代码：

var click = document.getElementById("click2");
var amount = 0;
var seconds = 10;
var endOfTimer = setInterval(click2, 1000);
function click2() {
seconds--;
document.getElementById("10stimer").innerHTML = seconds + "s";
if (seconds <= 0) {
var cps = Number(amount) / 10;
document.getElementById("clicksamount").innerHTML = "You got " + cps + " CPS!";
document.getElementById("click2").disabled = true;
document.getElementById("10stimer").innerHTML = "Ended";
clearInterval(seconds);
}
}
document.getElementById("click2").onclick = function() {
amount++;
document.getElementById("clicksamount").innerHTML = amount + " Clicks";
}

Answer 1

看起来您正在覆盖 idclick2最低 4 行的按钮上的 onclick 函数。

此外，您可以使用 seconds 变量而不是实际间隔调用clearInterval()，该间隔由endOfTimer引用。

我建议在一个函数中有一个单独的计时器管理，你只在第一次点击按钮时调用。

请参阅 JSFiddle

<button id="clickbutton" onclick="buttonClick()">Click Me!</button><br>
<span id="clicksamount">0 Clicks</span><br><br>
<span id="secondcount">10s</span>

// We will have timerStarted to see if the timer was started once, 
// regardless if it's still running or has already ended. Otherwise
// we would directly restart the timer with another click after the 
// previous timer has ended.
// timerRunning only indicates wether the timer is currently running or not.
var timerStarted = false;
var timerRunning = false;
var seconds = 10;
var clickAmount = 0;
var timer;
function buttonClick() {
if (!timerStarted) {
startTimer();
}
// Only count up while the timer is running.
// The button is being disabled at the end, therefore this logic is only nice-to-have.
if (timerRunning) {
clickAmount++;
document.getElementById("clicksamount").innerHTML = clickAmount + " Clicks";
}
}
function startTimer() {
timerStarted = true;
timerRunning = true;
timer = setInterval(timerTick,1000);
}
function timerTick() {
seconds--;
document.getElementById("secondcount").innerHTML = seconds + "s";
if (seconds <= 0) {
timerRunning = false;
clearInterval(timer);
var cps = Number(clickAmount) / 10;
document.getElementById("clickbutton").disabled = true;
document.getElementById("clicksamount").innerHTML = "You got " + cps + " CPS (" + clickAmount + "clicks in total)!";
}
}

Answer 2

我对你的代码做了一些更改。实际上，当用户第一次单击时，您将启动计时器。计时器变量为 null，直到用户单击第一个。

var click = document.getElementById("click2");
var noOfClicks = 0;
var seconds = 10;
var timer  = null;
function doTick(){
seconds--;
if(seconds<=0){
seconds = 10;
clearInterval(timer);
document.getElementById("10stimer").innerHTML= "Ended"
timer=null;
document.getElementById("click2").disabled = true;
}
updateDisplay()
}
function updateClicks(){
if(!timer){
timer=setInterval(doTick, 1000);
clicks= 0;
seconds = 10;
}
noOfClicks++;
updateDisplay();
}
function updateDisplay(){
var cps = Number(noOfClicks) / 10;
document.getElementById("clicksamount").innerHTML = "You got " + cps + " CPS!";
document.getElementById("10stimer").innerHTML =seconds;

}
click.addEventListener('click', updateClicks)

https://jsbin.com/bibuzadasu/1/edit?html,js,console,output

Answer 3

function timer(startEvent, stopEvent) {
let time = 0;
startEvent.target.addEventListener(startEvent.type, () => {
this.interval = setInterval(()=>{
time++;
}, 10); // every 10 ms... aka 0.01s
removeEventListener(startEvent.type, startEvent.target); // remove the listener once we're done with it.
stopEvent.target.addEventListener(startEvent.type, () => {
clearInterval(this.interval); // stop the timer
// your output function here, example:
alert(time);
removeEventListener(stopEvent.type, stopEvent.target); // remove the listener once we're done with it.
});
});
}

使用事件侦听器而不是点击次数

使用示例：

.HTML

<button id="mybutton">Click me!</button>

.JS

/* ABOVE CODE ... */
let mybutton = document.getElementById("mybutton");
timer(
{target: mybutton, type: "click"},
{target: mybutton, type: "click"}
);

function timer(startEvent, stopEvent) {
	    let time = 0;
	    startEvent.target.addEventListener(startEvent.type, () => {
		    this.interval = setInterval(()=>{
			time++;
	    	}, 10); // every 10 ms... aka 0.01s
		removeEventListener(startEvent.type, startEvent.target); // remove the listener once we're done with it.
		stopEvent.target.addEventListener(startEvent.type, () => {
		    	clearInterval(this.interval); // stop the timer
	    		// your output function here, example:
			alert(time);
			
	    		removeEventListener(stopEvent.type, stopEvent.target); // remove the listener once we're done with it.
		    });
});
	
}
let mybutton = document.getElementById("mybutton");
timer(
{target: mybutton, type: "click"},
{target: mybutton, type: "click"}
);

<button id="mybutton">Click me!</button>

Answer 4

//state initialization
var amount = 0;
var seconds = 10;
var timedOut=false;
var  timerId=-1;
//counters display
var clicksDisplay= document.getElementById("clicksamount");
var timerDisplay= document.getElementById("10stimer");
function click2(e){
//first click 
if(timerId===-1){
//start timer  
timed();
}
//still in time to count clicks
if(!timedOut){
amount++;
clicksDisplay.innerText=amount +" Clicks";
}
}
function timed(){
//refresh timer dispaly
timerDisplay.innerText=seconds+"s";
seconds--;
if(seconds<0){
//stop click count
timedOut=true;    
}else{
//new timerId
timerId=setTimeout(timed,1000);
}
}