个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在让我的应用程序正常运行时遇到了一些问题。这是一个问答应用程序，带有一个简单的倒计时计时器。我的问题是当我想在 setInterval() 运行时重置游戏(重新加载页面)时，它起作用了。但是，如果 setInterval() 被 clearInterval() 停止并且我的 Game Over 元素显示，如果我点击重置，期望调用 location.reload( )，页面自动再次启动计时器。这是某种我似乎找不到的循环问题，但也许您的专业人士可以发现我的代码中的错误。
我已尝试通过多种方式重构我的代码以隔离错误，但我似乎无法找到它。
// DOM ELEMENTS ========================================================
const startReset = document.getElementById("startReset");
const scoreValue = document.getElementById("score");
const timer = document.getElementById("timer");
const timerValue = document.getElementById("timerValue");
const gameOver = document.getElementById("gameOver");
const correct = document.getElementById("correct");
const wrong = document.getElementById("correct");
// GLOBAL GAME VARIABLES ===============================================
let playing = false;
let score;
let action;
let timeRemaining;
// GAME OPERATIONS =====================================================
// Start/Reset Game
startReset.onclick = function() {
// Reset Game
if(playing === true) {
// Reload page
location.reload();
}
// Start Playing
else {
// Change mode from not playing to playing
playing = true;
// Take Away Game Over Element
gameOver.style.visibility = "hidden";
// Change start button to reset button
startReset.innerHTML = "Reset Game";
// Put score back to 0
score = 0;
// Update HTML with score
scoreValue.innerHTML = score;
// Display timer
timer.style.display = "block";
timeRemaining = 60;
// Start Countdown
startCountdown();
}
}
// Start Countdown Function
const startCountdown = () => {
// Set timer
action = setInterval(function(){
// reduce time by 1 sec
timeRemaining -= 1;
// update html
timerValue.innerHTML = timeRemaining;
// check if time is out
if(timeRemaining === 0) {
stopCountdown();
gameOver.style.visibility = "visible";
timer.style.display = "none";
correct.style.display = "none";
wrong.style.display = "none";
playing = false;
}
}, 100);
};
// Stop Countdown Function
const stopCountdown = () => {
clearInterval(action);
};
=============================================================
<body>
<div id="logoContainer">
<img src="./images/gotLogo.png">
</div>
<div id="container">
<div id="scoreCounter">
Score: <span id="score">0</span>
</div>
<div id="correct">Correct</div>
<div id="wrong">Try Again</div>
<div id="question">
<p>Click Start to Begin!</p>
</div>
<div id="instruction">
Click on the correct answer!
</div>
<div id="choices">
<div id="choice1" class="choice"></div>
<div id="choice2" class="choice"></div>
<div id="choice3" class="choice"></div>
<div id="choice4" class="choice"></div>
</div>
<div id="startReset">
Start Game
</div>
<div id="timer">
Time Remaining: <span id="timerValue">60</span> sec
</div>
<div id="gameOver">
<p>GAME OVER!</p>
<p>YOUR SCORE IS: <span id="finalScore">0</span></p>
</div>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
我希望在 Game Over 出现后单击 Reset Game 会重新加载页面并强制重新单击以开始游戏，但是，它会重新加载页面并自动重新启动计时器。如果我在计时器运行时单击 Reset Game，它会按预期工作。
最佳答案
已找到答案。也许这会对其他人有所帮助。
在我的 startCountdown() 函数中，在 if 语句中，我最初重置了 playing = false，这短路了我上面在 Start/Reset game 下声明的 onclick 函数的条件逻辑。去掉它可以让游戏正常运行!
关于javascript - 如何使用 clearInterval() 和 location.reload()？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55764287/
25
4
0
哇，这是我的第一篇文章!编程和编码的新手，这是我从事的第一个项目。我希望能够使用 setInterval() 来切换开关以运行代码或停止它。但是现在我无法在选择切换开关时将其关闭。尝试了多种方法，比如
Javascript 具有用于处理异步函数调用的 setInterval 和 clearInterval 函数。 clearInterval(handle) 和 window.clearInterva
我写了一个小函数，像这样每 5 秒移动/弹出一个按钮: HTML: Text JS: var interval; function buttonShake(){ var times = 5;
当我尝试将 clearInterval 绑定(bind)到按钮单击时，我无法正常工作。此外，显然该功能正在自行启动......这是我的代码 var funky = setInterval(functi
我正在创建一个倒数计时器，我需要从不同的函数调用 clearInterval，因为我想用两个不同的按钮开始和暂停倒计时 这是我的一段代码 const startCountdown = () => {
我正在尝试创建一个 slider ，其中的幻灯片或来自ajax。将鼠标悬停在 slider div 上会停止 slider 。为此，我创建了一个函数 sliderPopulateBlocks() ，它
我做了一个演示which is here 。您所要做的就是开始在文本字段中输入内容，确保控制台已打开。因此，当您键入时，您会立即看到 OMG Saved，并且控制台中的计数器会变得疯狂。 现在单击按钮
这是我的代码，它每秒根据变量自动添加一定数量的“点”或金币，但是当该变量发生变化时，这是通过运行此命令来停止设置的间隔的按钮不起作用的。请帮我解决这个问题。 function addMiner() {
我最近尝试每两秒重复一次 jQuery AJAX 请求。请注意:我已经查看了有关 SO 的其他问题，但其中似乎不适用于我的情况，我还查看了文档。 片段: else if (text == "load"
仍在掌握 javascript 的窍门，但不确定如何做到这一点.. 我使用间隔在页面上发送错误和成功消息，但遇到了一些问题。 假设我有以下内容: function setMyInterval(elem
var intervalHandles = []; function instanceLoopTimer(url,instance, time, id) { if (id in intervalHan
所以我尝试使用 JavaScript 编写一个计时器。加载页面时一切都很好，唯一的问题是当我多次重置计时器或使用应用按钮更改其持续时间(请参阅代码以查看这些按钮)而不是按预期运行时，旧实例计时器继续运
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
我试图在像这样向下滚动的同时使用 headless-chrome/puppeteer 抓取一些链接: let interval const linkScraper = async () => {
在此程序中，我收到一个日期和时间，并从当前时间和日期开始计算每秒，并在达到用户日期和时间后显示“我们已到达”。 但问题是，一旦达到该时间，即使我清除了间隔，该函数仍然保持执行。 我发现了许多具有相同标
我正在开发游戏。我有带电池的板。单击“开始”后，3秒后，第一个单元格亮起，然后是下一个和下一个......但是，我希望板上只点亮一个单元格。这是我的代码: let intervalId; const
我有这个小脚本，可以通过淡入/淡出效果更改背景图像: /*controla la velocidad de la animación*/ var slideshowSpeed = 1000;
我无法为我的函数运行 clearInterval。我使用它们通过触发 setInterval 和触发 scrollLeft 的函数来滚动窗口。代码: function scrollSpan() {
在给定的代码中，我正在使用 setInterval() 和 clearInterval() 方法。这里有两个用于 setInterval() 的按钮和两个用于 clearInterval() 的按钮，
我正在寻找一种方法来停止我的脚本进程。这是一个有 16 张图片的脚本，每五秒随机选择一张图片。如果您选择了该图片(通过下面的提交按钮)，则随机图片“选择器”需要停止。 一切正常，我找不到如何让 set
我是一名优秀的程序员,十分优秀！