按钮不在启动计时器后答案

【问题标题】：Button is not after starting timer按钮不在启动计时器后
【发布时间】：2014-11-15 15:12:42
【问题描述】：

我分别使用 setInterval() 和 clearInterval() 方法进行定时器和停止定时器。我正在使用两个按钮“启动计时器”和“停止计时器”。当我单击“停止计时器”按钮时，时间停止，在单击“开始计时器”按钮后，它停止，然后当我再次单击“停止计时器”按钮时，时间不会停止。你能帮我吗？这是我的代码：

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <p id="start"></p>
        <button onClick = "startTimer()">Start Timer </button>
        <button onClick = "stopTimer()"> Stop Timer </button>
        <script>
            var myVar = setInterval(function(){myTimer()},1000);
            function myTimer()
            {
                var time = new Date();
                var t = time.toLocaleTimeString();
                document.getElementById("start").innerHTML = t;
            }
            function startTimer()
            {
                setInterval(function(){myTimer()}, 1000);
            }
            function stopTimer()
            {
                clearInterval(myVar);
            }
        </script>
    </body>
</html>

【问题讨论】：

标签： javascript html

【解决方案1】：

您没有在 startTimer() 函数中将时间间隔分配给 myVar 变量。因为 stopTimer() 不会清除 startTimer() 函数设置的时间间隔..

为了更安全，您可以在设置之前清除间隔。否则，如果用户多次单击开始计时器按钮，则计时器停止按钮将不再起作用。因为设置了新的时间间隔，没有清除之前的时间间隔，所以之前没有清除的时间间隔将运行然后......

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <p id="start"></p>
        <button onClick = "startTimer()">Start Timer </button>
        <button onClick = "stopTimer()"> Stop Timer </button>
        <script>
            var myVar;
            startTimer();
            function myTimer()
            {
                var time = new Date();
                var t = time.toLocaleTimeString();
                document.getElementById("start").innerHTML = t;
            }
            function startTimer()
            {
                clearInterval(myVar);
                myVar = setInterval(function(){myTimer()}, 1000);
            }
            function stopTimer()
            {
                clearInterval(myVar);
            }
        </script>
    </body>
</html>

【讨论】：

【解决方案2】：

试试这个：

function startTimer()
{
    myVar=setInterval(function(){myTimer()}, 1000);
}

【讨论】：

【解决方案3】：

<html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <p id="start"></p>
        <button onClick = "startTimer()">Start Timer </button>
        <button onClick = "stopTimer()"> Stop Timer </button>
        <script>
            var myVar = setInterval(function(){myTimer()},1000);
            function myTimer()
            {
                var time = new Date();
                var t = time.toLocaleTimeString();
                document.getElementById("start").innerHTML = t;
            }
            function startTimer()
            {
               myVar = setInterval(function(){myTimer()}, 1000);
            }
            function stopTimer()
            {
                clearInterval(myVar);
            }
        </script>
    </body>
</html>

【讨论】：