Javascript中的setTimeout冲突

setTimeout conflict in Javascript

本文关键字：冲突 setTimeout 中的 Javascript      更新时间：2023-09-26

我是这里的新手，也是JV/web开发的新手，试图在JS中创建一个轻量级反应游戏，但遇到了一些问题：

  1. 我试图在点击按钮后初始化游戏，但我发现页面刷新后游戏会自行启动？我在脚本底部调用按钮fxn"time_init（）"，但它仍然自己加载？

  2. 我该如何让游戏只进行15秒这样的固定时间？它继续。。。？我觉得setTimeout方法缺少，或者我用错了？

  3. 最后，如果我想计算一个正方形与一个圆形的点击次数，并在点击后输出他们的反应时间，最好的方法是什么？我想创建一个while循环，只计算在玩游戏时点击正方形的次数。。

这是我迄今为止的代码：

<input type="button" value="Start" onclick="time_init()" />
<p class="bold">Your time: <span id="time">0</span>s</p>
<div id="box"></div>
<script type="text/javascript"> 
var clickedTime; var createdTime; var reactionTime;
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color +=letters[Math.round(Math.random() * 15)];
    }
    return color;
}
function time_init() {
setTimeout('makeBox()', 1000);}

function makeBox() {
    var time=Math.random();
    time=time*1500;
    setTimeout(function() {
        if (Math.random()>0.5) {
            document.getElementById("box").style.borderRadius="100px";
        } else {
            document.getElementById("box").style.borderRadius="";
        }
        var top=Math.random();
        top=top*500;
        var left=Math.random();
        left=left*800;
        document.getElementById("box").style.top=top+"px";
        document.getElementById("box").style.left=left+"px";
        document.getElementById("box").style.backgroundColor=getRandomColor();
        document.getElementById("box").style.display="block";
        createdTime=Date.now();
    }, time);
}
document.getElementById("box").onclick=function() {
    clickedTime=Date.now();
    reactionTime= (clickedTime - createdTime)/1000;
    document.getElementById("time").innerHTML=reactionTime;
    this.style.display="none";
    makeBox();
}
time_init();

您在代码末尾显式调用time_init();。这将立即启动，并在1秒后调用makebox()。

如果你想在15秒后关闭，创建一个标志变量和另一个超时来在这段时间后翻转它。然后，无论何时执行任何操作，都要检查该标志变量，以决定是否继续执行该操作。

var isRunning = true;
setTimeout( function() { isRunning=false; }, 15000 );
document.getElementById("box").onclick=function() {
    clickedTime=Date.now();
    reactionTime= (clickedTime - createdTime)/1000;
    document.getElementById("time").innerHTML=reactionTime;
    this.style.display="none";
    if ( isRunning ) {
        makeBox();
    }
}
相关文章：