clearInterval 并没有始终如一地停止时间

Question

我正在创建一个简单的猜谜游戏，将用户限制在 30 秒以内。在那之后，游戏结束并显示结果。问题是有时一切正常，"timer" html 显示 Times Up。其他时候，倒计时开始倒计时。我的间隔 id 变量是全局的，最初设置为空。我不确定发生了什么。

function words(x)
{
 switch (x)
 {
 case 1:
  var word = new Array("balte","table","hat","tab","belt","lab","eat","tea","ate","tale","bale","let","bet","teal","late","beat");
  break;  
 case 2:
  var word = new Array("atwre","water","wet","wear","tear","war","ret","rate","eat","ate","tea","awe","raw","rat","wart","art","tar");
  break;
 case 3:
  var word = new Array("dclaen","can","cane","and","clan","lane","lean","lend","land","den","dean","dance","lance","clean","deal","ale","dale","candle","clad");
  break;
 case 4:
  var word = new Array("aepinlar","air","airplane","plane","plan","lane","lean","pane","ear","near","nap","nape","lair","pen","pan","ape","leap","ale","peal","nap","rap","par", "pare", "pale", "are", "rail", "ail", "pail", "nail", "air", "pair", "ran", "pin", "pine", "line", "nip", "rip", "ripe", "lip", "earn", "learn", "ire");
  break;
 case 5:
  var word = new Array("redykboa","keyboard","key","board","bored","bore","bark","dark","dork","oar","boar","ark","dare","bare","are","red","rod","road","bode","rode","ode","bread", "read", "bead", "bred", "break", "drey", "day", "boy", "broke", "rake", "bake", "ear", "dear", "bear", "dye", "dyer", "doer", "oak", "boa", "doe", "okay","dab", "bade", "ade", "drake", "bard", "yard", "year", "beak", "beard", "bad", "bed", "bay");
  break;
            
    case 6:
  var word = new Array("evtsaedri","advertise","side","eat","sad","sat","rat","rate","vet","advise","read","rest","vest","serve","served","aside","east","tread","dear","deer","tear","trade","starve","steer","stare","veer","seat","seed","tree","drives","strive");
  break;
 case 7:
  var word = new Array("rcseanbh","branches","bra","she","ran","bran","car","cab","race","ranch","share","bench","bar","char","can","crane","ban","hear","hare");
  break;
 case 8:
  var word = new Array("vradntseue","adventures","vent","dent","stun","dust","rust","vase","sure","ensure","star","vend","dare","tar","starve","trade","sad","eat veer","tear","seat","seed","sand","tree","rest");
  break;
 case 9:
  var word = new Array("wokcnalgede","acknowledge","and","land","wand","wage","ledge","led","lead","lend","leg","gown","know","now","no","lean","wean","week","wed","lack","leak","deal","deck","knew","kneel");
  break;
 case 10:
  var word = new Array("muprith","triumph","hit","hurt","pit","trim","rum","rump","tip","thump","put","rim","him","hum","hip","rut");
  break;
 }    
 return word;
}

<html>
<head>
 <title>Greg's Gambits | Greg's Game of Boggle</title>
 <link href="greg.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="gregBoggle2.js"></script>
    <script>
        
        compWords = new Array(); notAword = new Array();
        playWords = new Array();
        var play = ""; /*var today;*/ var count = 30;
        var score = 0; var interval = null; 
        var quit = false;
        
        function start()
        {
            /*var start = new Date();
            today = start.getTime();*/
            timeIt();
            boggle();
        }
        function displayLetters()
        {
            var num = Math.floor(Math.random()*10) +1;
            compWords = words(num);
            yourWord = compWords[0];
            document.getElementById("letters").innerHTML = yourWord;
        }  
        function timeIt()
        {
            interval = window.setInterval("countdown()",1000);
        }
        function countdown()
        {
            count--;
        if (count == 0)
            {
                window.clearInterval(interval);
                interval = null;
                document.getElementById("timer").innerHTML = "Time's Up";
                var btn =document.getElementById("start");
                btn.disabled = true;
                quit = true;
                checkWin();
                return;
            }
        document.getElementById("timer").innerHTML = count;
        }
        
        function boggle()
        {
            play = document.getElementById("words").value;
            if (!quit)
            {
                playWords.push(play);
                displayEntries();
                document.getElementById("words").value = "";
                document.getElementById("words").focus();
            } 
            else    
            {
                document.getElementById("words").value = "";
                document.getElementById("words").focus();
                checkWin();
            }    
                    
        }
        function displayEntries()
        {
            document.getElementById("entries").innerHTML = playWords.toString();
                
        }
        
        /*function toMinutesAndSeconds(millis)
        {
            var minutes = Math.floor(millis/60000);
            var seconds = ((millis%60000)/1000).toFixed(0);
            
            return minutes + ":" + ((seconds < 10 ? '0' : "")+ seconds);
        }*/
        function checkWin()
        {
            // check winning score and list bad words
            var complgth = compWords.length;
            var playlgth = (playWords.length);
            var flag; var timePlayed;
            /*var endTime = new Date().getTime();
            var diff = endTime - today;
            timePlayed = toMinutesAndSeconds(diff);*/
            for (var i = 0; i < playlgth; i++)
                {
                    flag = 0;
                    for (var k = 0; k < complgth; k++)
                        {
                             if (playWords[i] == compWords[k])
                                 {
                                     score= score + 1;
                                     flag = 1;
                                 }
                        }
                    
                    if (flag == 0)
                        notAword.push(playWords[i]);
                }
            document.getElementById("result").innerHTML = ("Your score is " +
                score + ". The following entries " + "are not valid words: <br />" +
                notAword.toString());
            /*document.getElementById("timer").innerHTML = ("Your time: " + timePlayed);*/

        }    
    </script>
    
</head>
<body>
<div id="container">
 <img src="images/superhero.jpg" width="120" height="120" class="floatleft" />
    <h1 align="center"><em>Greg's Game of Boggle</em></h1>
    <div style = "clear:both;"></div>
    <div id = "nav">
        <p><a href="index.html">Home</a>
        <a href = "greg.html">About</a>
        <a href = "play_games.html">Play a Game</a>
        <a href="signin.html">Sign In</a>
        <a href = "contact.html">Contact Us</a></p>            
    </div>
<div id="content">
    <p>The object of the game is to create as many words as
    you can. Please click the Display letters button and your letters will
    be shown below. You have 10 possible letter combinations and 30 seconds. When you are ready to begin, enter the word then click the Submit Word button. The timer will start after first entered word.</p>
    <p><input type="button" value="Display letters" onclick="displayLetters();" /><br/>
        <input type="text" id="words">
        <input type="button" id="start" value="Submit Word" onclick="start();" />
    </p>
    
    <h2><br /><br />Letters you can use:<br /><div id="letters">&nbsp;</div><br /></h2>
    <h2>Your words so far: <br /><div id="entries">&nbsp;</div><br /></h2>
    <h2>Results:<br /><div id="result">&nbsp;</div></h2> 
    <h2>Timer: <br /><div id="timer">&nbsp;</div></h2>
</div>
<div id="footer">Copyright &copy; 2013 Greg's Gambits<br />
<a href="mailto:foulksy@gmail.com">foulksy@gmail.com</a>
</div>
</div>    
</body>
</html>

Answer 1

每次提交单词时，都会调用 start() 函数，该函数会调用 timeIt()。如果您只提交一个单词，您的解决方案就有效，但如果您提交多个单词，您将运行遇到负计时器的问题。

我认为您必须先清除之前的 setInterval，然后才能创建新的 setInterval 并将其存储在您的间隔变量中：

    function timeIt()
    {
        window.clearInterval(interval);
        interval = window.setInterval(countdown, 1000);
    }

Answer 2

你应该替换这一行

interval = window.setInterval("countdown()",1000);

与以下

interval = window.setInterval(countdown, 1000);

您需要传递一个函数作为定时器调用的第一个参数。你传一个字符串，调用不了

More information here.

Answer 3

不确定这是否是它失败的原因，但 setInterval 将函数作为其第一个参数，而不是字符串。应该是 setInterval(countdown, 1000) 而不是 setInterval("countdown()", 1000).

clearInterval 并没有始终如一地停止时间

clearInterval is not stopping time consistenly

html

javascript

clearinterval