blocks|key|1154599|text|当您想要停止计时器时，setInterval返回传递给clearInterval()的值。您需要将其保存在resetGame()可以看到的范围内。您是在countTime()中声明的，这意味着它只在范围内。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1154600|在这里，我将它命名为interval，并在两个函数之外定义了它，因此这两个函数都可以访问它：|1154601|​|1154602|let+counter+=+60;
let+healthPoints+=+3;
let+points+=+0;
let+interval;

document.querySelector('.reset').addEventListener('click',+resetGame);


function+countTime()+{
++++const+timer+=+document.querySelector('.timer');
++++interval+=+setInterval(function+()+{
++++++++counter--;
++++++++timer.innerHTML+=+%2B+counter;
++++++++if+(counter+==+0)+{
++++++++++++alert('Game+over')
++++++++++++clearInterval(interval);
++++++++}
++++},+1000)
}

function+resetGame()+{
++++counter+=+60;
++++healthPoints+=+4;
++++points+=+0;
++++clearInterval(interval);
++++countTime()
}

countTime()|code-block|syntax|javascript|1154603|<button+class="reset">Reset</button>
<div+class+=+"timer"></div>|1154604|1154605|entityMap^0|B|B|R|F|1H|B|24|B|0|A|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|16|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|S|$]]

<p><code>setInterval</code> returns a value that you pass to <code>clearInterval()</code> when you want to stop the timer. You need to save this in a scope where <code>resetGame()</code> can see it. You are declaring inside <code>countTime()</code> which means it's only in scope there.</p>

<p>Here I've named it <code>interval</code> and defined it outside both functions so both functions have access to it:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let counter = 60;
let healthPoints = 3;
let points = 0;
let interval;

document.querySelector('.reset').addEventListener('click', resetGame);


function countTime() {
    const timer = document.querySelector('.timer');
    interval = setInterval(function () {
        counter--;
        timer.innerHTML = + counter;
        if (counter == 0) {
            alert('Game over')
            clearInterval(interval);
        }
    }, 1000)
}

function resetGame() {
    counter = 60;
    healthPoints = 4;
    points = 0;
    clearInterval(interval);
    countTime()
}

countTime()</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="reset"&gt;Reset&lt;/button&gt;
&lt;div class = "timer"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2686789|text|这是因为您没有实际清除该间隔，所以必须向clearInterval函数提供该函数，该函数需要一个间隔id，以便知道要清除哪个间隔。请参阅https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2686790|当您调用setInterval函数时，这个ID实际上会返回，所以您的countTime变量是您的间隔id。|2686791|这就是为什么当它达到零时，它是工作的，因为您通过向clearInterval函数提供它的id来正确地清除间隔，相反，您只是在resetGame函数中提供对clearInterval函数的函数引用。|2686792|因此，您可以做的实际上是从您的intervalId中返回您的countTime并将其提供给您的resetGame函数：|2686793|function+countTime()+{
++++...
++++const+timer+=+document.querySelector('.timer');
++++//+I+renamed+it+just+to+be+clear
++++const+countTimeIntervalID+=+setInterval(function+()+{
++++counter--;
++++timer.innerHTML+=+%2B+counter;
++++if+(counter+==+0)+{
++++++++alert('Game+over')
++++++++clearInterval(countTime);
++++}
+},+1000)
+++return+countTimeIntervalID
}
let+countTimeIntervalID+=+countTime();
function+resetGame()+{
+++++...
++++clearInterval(countTimeIntervalID);
}|code-block|syntax|javascript|2686794|另外，请注意，当您单击“重置”按钮时，它使计数器时间增加了一倍，因为您没有清除第一个计数器，因此它仍然在运行，因此实际上需要运行和更新相同的.timer+dom元素。|2686795|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval^0|1C|4|1W|2G|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|19|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1A|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>It is because you didn't actually cleared the interval, you must provide to the clearInterval function which needs an <strong>interval id</strong> in order to know which interval to clear. See <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval</a> </p>

<p>This id is actually returned when you call the setInterval function, so your countTime variable is your interval ID.</p>

<p>This is why when it reaches zero it works it is because you are properly clearing the interval by provided its id to the clearInterval function and on the contrary you are just providing the function reference to the clearInterval function in your resetGame function</p>

<p>So what you can do is actually returning your intervalId from your countTime and provided this to your resetGame function :</p>

<pre><code>function countTime() {
    ...
    const timer = document.querySelector('.timer');
    // I renamed it just to be clear
    const countTimeIntervalID = setInterval(function () {
    counter--;
    timer.innerHTML = + counter;
    if (counter == 0) {
        alert('Game over')
        clearInterval(countTime);
    }
 }, 1000)
   return countTimeIntervalID
}
let countTimeIntervalID = countTime();
function resetGame() {
     ...
    clearInterval(countTimeIntervalID);
}
</code></pre>

<p>Also, note that the reason why when you clicked the reset button it doubled the counter time it is because since you didn't clear the first one, it was still running so there were actually to intervals running and updating the same .timer dom element</p>


blocks|key|2686810|text|传递给countTime函数中的clearInterval函数的resetGame参数是对名为countTime的函数的引用。您需要重命名该变量并在全局声明它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2686811|let+counter+=+60;
let+healthPoints+=+3;
let+points+=+0;
let+t+=+null;
document.querySelector('.reset').addEventListener('click',+resetGame);
function+countTime()+{
++++const+timer+=+document.querySelector('.timer');
++++t+=+setInterval(function+()+{
++++counter--;
++++timer.innerHTML+=+%2B+counter;+
++++if+(counter+==+0)+{
++++++alert('Game+over')+++++
++++++clearInterval(t);
++++}
+++},+1000)
+}

function+resetGame()+{
++newBoard();
++counter+=+60;
++healthPoints+=+4;
++points+=+0;
++clearInterval(t);
}|code-block|syntax|javascript|2686812|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The countTime argument your are passing to the clearInterval function inside the resetGame function is a reference to the function called countTime. You need to rename the variable and declare it globally:</p>

<pre><code>let counter = 60;
let healthPoints = 3;
let points = 0;
let t = null;
document.querySelector('.reset').addEventListener('click', resetGame);
function countTime() {
    const timer = document.querySelector('.timer');
    t = setInterval(function () {
    counter--;
    timer.innerHTML = + counter; 
    if (counter == 0) {
      alert('Game over')     
      clearInterval(t);
    }
   }, 1000)
 }

function resetGame() {
  newBoard();
  counter = 60;
  healthPoints = 4;
  points = 0;
  clearInterval(t);
}
</code></pre>


<p>I'm trying to make simple game but I have problem to manage counter and to clear interval after counter reaches 0 or I click reset button. It works when It reaches 0, but when I try to implement it to reset button, counter is reseting but then goes with double speed.</p>

<pre><code>let counter = 60;
let healthPoints = 3;
let points = 0;

document.querySelector('.reset').addEventListener('click', resetGame);


function countTime() {
    const timer = document.querySelector('.timer');
    const countTime = setInterval(function () {
        counter--;
        timer.innerHTML = + counter;
        if (counter == 0) {
            alert('Game over')
            clearInterval(countTime);
        }
    }, 1000)
}

function resetGame() {
    newBoard();
    counter = 60;
    healthPoints = 4;
    points = 0;
    clearInterval(countTime);
}
</code></pre>


clearing interval after counter reach 0 or reset

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我试图做简单的游戏，但我有问题管理计数器和清除时间后，计数器达到0或我点击重置按钮。它在达到0时工作，但是当我尝试实现它以重置按钮时，计数器正在重置，然后以双倍的速度运行。let counter = 60;let healthPoints = 3;let points = 0;document.querySelecto...

问计数器到达0或复位后的清除间隔
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问计数器到达0或复位后的清除间隔EN