javascript - 第一次单击按钮时激活计时器

Question

我正在创建一个网页，用户可以在 5 秒内尽可能多次地单击按钮。目前，计时器在页面首次加载时启动。但是，我希望计时器在用户第一次单击“单击”按钮时启动，并且不会在用户第一次单击后每次单击该按钮时重置。

关于如何做到这一点有什么想法吗？提前致谢。

HTML 按钮:

<div class='buttonDiv'>
        <button onclick='countClicks()' id='click' type="button">Click Me!</button>
    </div>

Javascript 函数:

/*record clicks*/
var clicks = 0;

function countClicks(){
document.getElementById('click').value = ++clicks;
document.getElementById('result').innerHTML = clicks;
}


/* Timer countdown */
var secs=5;
var counter=setInterval(timer, 1000);

function timer(){
 secs--;
 if (secs <= 0){
 clearInterval(counter);
 document.getElementById("click").disabled = true;

 document.getElementById("seconds").innerHTML=0;
 return;

 }
 document.getElementById("seconds").innerHTML=secs;
}

Answer 1

只需声明计数器变量，然后检查它是否在函数内设置:

var counter;

function countClicks(){

    if( !counter ){//counter is not set

        counter = setInterval(timer, 1000);

    } else {

        document.getElementById('click').value = ++clicks;
        document.getElementById('result').innerHTML = clicks;
    }
}