clearInterval并非始终停止时间

时间:2018-11-17 22:28:14

标签: javascript html clearinterval

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

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>

3 个答案:

答案 0 :(得分:2)

每次提交单词时,您都会调用start()函数,该函数将调用timeIt()。如果您只提交一个单词,那么您的解决方案就会奏效,但是如果您提交多个单词,则会遇到计时器为负数的问题。

我相信您必须先清除以前的setInterval,然后再创建一个新的setInterval并将其存储在您的interval变量中:

var array = [];

function add() {
  var task = document.getElementById("task").value;
  array.push(task);
  var text = document.createTextNode(task);
  var li = document.createElement("li");
  var btn = document.createElement("button");
  btn.appendChild(document.createTextNode("x"));
  btn.setAttribute("onclick", "remove()");
  btn.setAttribute("class", "btn-primary btn-sm newBtn");
  li.appendChild(text);
  li.appendChild(btn);
  document.getElementById("myUl").appendChild(li);
}

function remove() {
  var task = this.event.currentTarget.parentNode;
  document.getElementById("myUl").removeChild(task);
}

document.getElementById("task").addEventListener("keydown", function(event) {
  if (event.which == 13) {
    add()
  }
});

答案 1 :(得分:-1)

您应该替换此行

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

带有以下内容

interval = window.setInterval(countdown, 1000);

您需要传递一个函数作为第一个可以被计时器调用的参数。您传递了无法调用的字符串。

More information here.

答案 2 :(得分:-1)

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