Question

我有这个程序告诉你你的反应时间，它工作正常，但如果你运行程序并单击开始按钮两次，而不是一次，背景会立即变红，而不是等待设定的间隔。提前感谢任何可以提供帮助的人。

<!DOCTYPE html>
<html>
<head>
<script>
var button = document.getElementById("reactionTester");
var start = document.getElementById("start");
var startTime;
var scoreContainer = document.getElementById("p");
var css = document.createElement("style");
css.type = "text/css";
var counter = 0;

function init() {
    var startInterval /*in milliseconds*/ = Math.floor(Math.random() * 10) * 1000;
    setTimeout(startTimer, startInterval);
}

function startTimer() {
    startTime = Date.now();
    document.body.appendChild(css);
    css.innerHTML = "html{background-color: red;}";
    if (counter = 1) {
        p1 = document.getElementsByTagName('p')[0];
        p1.parentNode.removeChild(p1);
    }
}

function stopTimer() {
    if (startTime) {
        var stopTime = Date.now();
        var dif = stopTime - startTime;
        alert("Your time is " + dif + " ms");
        startTime = null;
        css.innerHTML = null;
        var p = document.createElement("p");
        document.body.appendChild(p);
        p.innerHTML = dif;
        counter = 0;
        counter++;
    } else {
        alert("don't trick me");
    }
}

</script>
</head>
<body>
<form id="form">
<div class="tableRow">
<input type="button" value="start" id="start" onclick="init()">
</div>
<div class="tableRow">
<input type="button" id="reactionTester" onclick="stopTimer()" value="stop">
</div>
<div id="p">
</div>
</form>
</body>
</html>

Answer 1

这里有两个（潜在的）问题：

每次init()运行时，它会将startTime重置为Date.now()。因此，当stopTimer运行时，它只会在最近的点击时间内运行。
init可以设置0ms的间隔，这可能是...

要修复第一个问题，你可以做一些事情，但最简单的方法是通过获取引用然后清除它来取消第一个超时：

var timeoutId;

function init(){
    if (timeout) clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
}

Answer 2

您需要跟踪变量中的计时器，以便重置它。

<!DOCTYPE html>
<html>
<head>
<script>
var button = document.getElementById("reactionTester");
var start = document.getElementById("start");
var startTime;
var scoreContainer = document.getElementById("p");
var css = document.createElement("style");
css.type = "text/css";
var counter = 0;
var timer = null;

function init() {
    var startInterval /*in milliseconds*/ = Math.floor(Math.random() * 10) * 1000;
    clearTimeout(timer);
    timer = setTimeout(startTimer, startInterval);
}

function startTimer() {
    startTime = Date.now();
    document.body.appendChild(css);
    css.innerHTML = "html{background-color: red;}";
    if (counter = 1) {
        p1 = document.getElementsByTagName('p')[0];
        p1.parentNode.removeChild(p1);
    }
}

function stopTimer() {
    if (startTime) {
        var stopTime = Date.now();
        var dif = stopTime - startTime;
        alert("Your time is " + dif + " ms");
        startTime = null;
        css.innerHTML = null;
        var p = document.createElement("p");
        document.body.appendChild(p);
        p.innerHTML = dif;
        counter = 0;
        counter++;
    } else {
        alert("don't trick me");
    }
}

</script>
</head>
<body>
<form id="form">
<div class="tableRow">
<input type="button" value="start" id="start" onclick="init()">
</div>
<div class="tableRow">
<input type="button" id="reactionTester" onclick="stopTimer()" value="stop">
</div>
<div id="p">
</div>
</form>
</body>
</html>

使用setTimeout（）的javascript错误

2 个答案: