ClearInterval не останавливает время постоянно

Я создаю простую игру, в которой пользователь ограничен 30 секундами. По истечении этого времени игра заканчивается и отображаются результаты. Проблема в том, что ИНОГДА все работает нормально, а HTML-код "таймера" показывает Times Up. В других случаях обратный отсчет начинает обратный отсчет. Моя переменная идентификатора интервала является глобальной и изначально имеет значение 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:[email protected]">[email protected]</a>
</div>
</div>    
</body>
</html>

javascript html clearinterval

17.11.2018 23:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Каждый раз, когда вы отправляете слово, вы вызываете функцию start (), которая вызывает timeIt (). Ваше решение работает, если вы отправите только одно слово, но если вы отправите несколько, вы столкнетесь с проблемой, когда вы увидите отрицательный таймер.

Я считаю, что вам нужно очистить предыдущий setInterval перед созданием нового и сохранением его в переменной интервала:

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

это или просто не присоединять, если интервал уже установлен :)

— 17.11.2018 23:35

17.11.2018 23:35

Вы должны заменить эту строку

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

со следующими

interval = window.setInterval(countdown, 1000);

Вам нужно передать функцию в качестве первого параметра, который может быть вызван таймером. Вы передаете строку, которую нельзя вызвать.

Больше информации здесь.

Я отклонил этот ответ, потому что не только то, что в нем указано неправильно (хотя, как сказал @Ry, не рекомендуется), он не отвечает на заданный вопрос.

— 18.11.2018 01:51

17.11.2018 23:36

Не уверен, что именно поэтому он не работает, но setInterval принимает в качестве первого аргумента функцию, а не строку. Это должен быть setInterval(countdown, 1000), а не setInterval("countdown()", 1000).

На самом деле он может принимать и то, и другое, хотя никогда не следует использовать строковую версию (это как eval).

— 17.11.2018 23:42

— 18.11.2018 01:51

17.11.2018 23:36