javascript 的 SetInterval()、ClearInterval() 计时器问题答案

【问题标题】：SetInterval(), ClearInterval() timer questions for javascriptjavascript 的 SetInterval()、ClearInterval() 计时器问题
【发布时间】：2014-04-24 00:51:16
【问题描述】：

大家好，我正在尝试制作一个间隔计时器，用户可以在其中输入轮数、工作间隔长度和休息间隔长度。因此，如果用户输入工作 30 秒，休息 10 秒，以及 10 轮，则计时器将显示标题为“WORK”并运行 30 秒，然后标题将变为“REST”并再运行 10 秒秒（总共 40 秒）。一旦达到 40 秒，计时器将回到 0 并继续这样做 9 轮（总共 10 轮）。我以前从未创建过计时器，所以我有点困惑。我已经让计时器开始工作，但我在更改标题和在每一轮重新启动计时器时遇到了麻烦。以下是我的 HTML 和 Javascript 的副本。非常感谢任何帮助！

Javascript：

var time = 0;
var running = 0;
var rounds = document.getElementById("numRounds").value;
var work = document.getElementById("numWork").value;
var rest = document.getElementyId("numRest").value;


function startPause()
{
    if(document.getElementById("numRounds").value == "" | document.getElementById("numWork").value == "" | 
        document.getElementById("numRest").value == ""){
            document.getElementById("error").innerHTML = "*All fields are required.";
        }
    else{
        if(running == 0){
            running = 1;
            increment();
            document.getElementById("startPause").innerHTML = "Pause";
        }
        else{
            running = 0;
            document.getElementById("startPause").innerHTML = "Resume";
        }
    }
}

function reset()
{
    running = 0;
    time = 0;
    document.getElementById("startPause").innerHTML = "Start";
    document.getElementById("output2").innerHTML = "00:00:00";
}
function work(){
    time++;
    var mins = Math.floor(time/10/60);
    var secs = Math.floor(time/10 % 60);
    var tenths = time % 10;
    if(mins < 10){
        mins = "0" + mins;
    }
    if(secs < 10){
        secs = "0" + secs;
    }
    document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
    increment(); 
    if(secs < work){
        document.getElementById("work").innerHTML = "WORK";
    }
    var total = work + rest;
    else if(secs >= work && secs< total){
        document.getElementById("work") = "REST";
    }
    else{
        clearInterval();
        increment();
    }
}
function increment()
{
    if(running == 1){
        for(var i=0;i<rounds; i++){
            setTimeout(work(),100);
        }
    }
}

HTML：

 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <link href='http://fonts.googleapis.com/css?family=Nixie+One' rel='stylesheet' type='text/css'/>
 <link rel="stylesheet" type="text/css" href="css/workitt.css"/> 
     <script type="text/javascript" src="js/stopwatch.js"></script>     
    <title>Workitt</title>
 </head>
 <body>
    <div class="header" style="margin: 0 auto">
    <h1><img src="images/workitt-header.jpg" alt="header" /></h1>
      <ul id="navbar">
            <li><a href="workitt.html">Home</a></li>
            <li>&nbsp;|&nbsp;</li>
            <li><a href="createworkout.html">Custom&nbsp;Workout</a>
                <ul>
                    <li><a href="strength.html">Strength&nbsp;Workout</a></li>
                    <li><a href="cardio.html">Cardio&nbsp;Workout</a></li>
                    <li><a href="stretching.html">Stretching&nbsp;Workout</a></li>
                    <li><a href="swimming.html">Swimming&nbsp;Workout</a></li>
                    <li><a href="office.html">Office&nbsp;Workout</a></li>
                </ul>
            </li>
            <li>&nbsp;|&nbsp;</li>
            <li><a href="library.html">Workout&nbsp;Library</a> 
                <ul>
                    <li><a href="upperbody.html">Upper&nbsp;Body</a></li>
                    <li><a href="lowerbody.html">Lower &nbsp;Body</a></li>
                    <li><a href="cardiowork.html">Cardio</a></li>
                    <li><a href="core.html">Core</a></li>
                </ul>
            </li>
            <li>&nbsp;|&nbsp;</li>
            <li><a href="accessories.html">Fitness&nbsp;Accessories</a> 
                <ul>
                    <li><a href="fitnesscalculators.html">Fitness&nbsp;Calculators</a></li>
                    <li><a href="fitnesstimers.html">Fitness&nbsp;Timers</a></li>
                    <li><a href="diary.html">Fitness&nbsp;Journal</a></li>
                    <li><div class="clearfix"></div></li>
                </ul>
            </li>
      </ul>
      <p>&nbsp;</p>
      </div>    
      <div>&nbsp;</div>
      <div class="body" style="margin: 0 auto">
        <div id="work">WORK</div>
        <div id="output"><span class='left'>&nbsp;Round</span><span class='right'>Time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br/><span id="output2">&nbsp;0&nbsp;&nbsp;00:00:00</span></div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <div>
            Number of Rounds:&nbsp;<input type="text" id="numRounds" name="Rounds" size="6"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Length of Work:&nbsp;<input type="text" id="numWork" name="Work" size="6"/>&nbsp;(seconds)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Length of Rest:&nbsp;<input type="text" id="numRest" name="Rest" size="6"/>&nbsp;(seconds)
        </div>
        <br/>
        <div id="controls">
            <button id="startPause" onclick="startPause()">Start</button>
            <button onclick="reset()">Reset</button><br/><br/>
            <span id="error"></span>
        </div>
        <br/>
      </div>
      <p>&nbsp;</p>
      <p><br /><br /></p>
      <hr style="width: 30%;margin-left: auto, margin-right: auto" />
      <div style="text-align:center">Created By: Danielle Hafner<br/>
            <script type="text/javascript">
                <!--
                    document.write("Last Modified " + document.lastModified)
                // -->
            </script> 
        </div>
</body>
</html>

【问题讨论】：

随着时间段的不同，你会想要使用setTimeout，而不是setInterval。 setTimeout 触发一次，然后当您完成该周期时，您使用另一个 setTimeout 开始下一个周期。如果您不清除它，setInterval 将一遍又一遍地触发相同的功能。哦，刚刚注意到你使用的是setTimeout，你需要使用clearTimeout，而不是clearInterval。

标签： javascript html timer setinterval clearinterval

【解决方案1】：

让我用一个简单的例子来回答你的问题。所以我们想让我们的计时器成为一个变量，这样我们就知道在调用clearInterval 时要清除什么。所以对于我们的计时器，我们可以这样做：myTimer = setInterval(...)，然后当我们想要清除它时，我们可以这样做：clearInterval(myTimer)。所以这里有一个小例子，一个基本的计数器会自动重置：

HTML：

<button id="play">Play</button>
<button id="stop">Stop</button>
<div id="counter">0</div>

JS：

var myTimer;
var count = 0;

document.getElementById("play").onclick = function()
{
   myTimer = setInterval(counter, 1000);
   document.getElementById("play").disabled = true;
}

document.getElementById("stop").onclick = function()
{ 
    clearInterval(myTimer);
    count = 0; 
    document.getElementById("play").disabled = false;
}

function counter()
{
   count++;
   document.getElementById("counter").innerHTML = count;
}

在这里提琴：http://jsfiddle.net/AniHouse/aCfEL/

【讨论】：

【解决方案2】：

咀嚼这个：http://jsfiddle.net/4cmEB/5/ :-)

根据需要更改 rounds、states 和 lengths。我在两轮之间添加了另一个名为wait 的状态，您可以将其删除，但请记住还要从长度中删除相应的时间。

【讨论】：

如果我想实现这个，但我想获得用户输入的 var 长度，我该怎么做？我以为我会放 var work = $('numWork').val(); var 休息 = $('numRest').val(); var lengths = [工作，休息]；在 start.click 功能下，但不能正常工作
您应该使用$('#numWork').val()，注意#。更多关于 jQuery 选择器的信息：api.jquery.com/category/selectors/basic-css-selectors