if / else и setInterval

Question

<script>
    
    
    //when user clicks start button this function ensures all fields //are set to 0 and it
    //sets the timer for the game (90seconds) and the second timer to //call showWord() every four seconds to display a new word
   
function startGame() {
    numBadWordsField.innerHTML = '';
    numGoodWordsField.innerHTML = '';
    numWordsRight = 0;
    numWordsWrong = 0;
    correctWords = [];
    showWord();
    gameTimer = setInterval(gameTime, 1000);
    timedWordDisplay = setInterval(showWord, 4000);
    }
    
    
    
    //this function is set to repeat every four seconds unless the user //types the word
    //correctly in which case code in the checkWord() function resets setInterval then and a new word appears 
    
    function showWord() {
    let randomNum = Math.floor(Math.random()*wordsLevelOne.length);
    currentWord = wordsLevelOne[randomNum];
        //i put all correctly typed words in an array to avoid them being repeated
        //if the random word has been typed correctly and is in the array then i tell the
        //program to repeat the function until a new word is found. 
    if (correctWords.includes(currentWord)) {
        showWord();
    } else {
        wordDisplayBox.innerHTML = currentWord;
        setInterval(changeBar, 500);
        answerBox.focus();
    }
   
}
   
    //this function is called oninput as user types in the word. it works perfectly (i think it does anyways) 
    //however i cannot figure out how to give instructions in the event the user does not type the
    //word correctly before the four seconds are up and the setInterval repeats. I would like to 
    //in that case increment the words wrong score and reset the fields to be ready for the next 
    //word to be displayed
    function checkWord() {
    let currentWordLen = answerBox.value.length;
    if (wordDisplayBox.innerHTML === answerBox.value) {
        clearInterval(timedWordDisplay);
        numWordsRight++;
        correctWords.push(currentWord);
        numGoodWordsField.innerHTML = numWordsRight;
        answerBox.value = '';
        answerBox.focus();
        wordDisplayBox.innerHTML = '';
        showWord();
        timedWordDisplay = setInterval(showWord, 4000);
    } else if (answerBox.value === currentWord.substring(0, currentWordLen)) {
             answerBox.style.borderColor = 'green';
    } else  {
             answerBox.style.borderColor = 'red';
    } 
}
 
    
    //different topic than above but i also researched how to make my progress bar fill slowly over the course
    //of the four seconds. i have written the following function identically to that on 
    //w3schools and other code yet it does not work. 
        //Any ideas?
   function changeBar() {
   let proBar = document.querySelector('#progressBar');
    var width = 1;
   var id = setInterval(frame, 10);
    function frame() {
    if (width >= 100) {
        clearInterval(id);
    } else {
        width++;
        proBar.style.width =  width + '%';
    }
    }
    }
    
    </script>

Этот проект, над которым я работаю, является игрой для начинающих со скоростью ввода текста, которая отображает другое слово, которое пользователь может набрать менее чем за четыре секунды. У меня есть setInterval, который отображаетдругое слово каждые четыре секунды, если пользователь не наберет слово правильно, и в этот момент таймер запускается снова.Что меня озадачило, так это то, как я могу сделать так, чтобы, если правильный ответ не был введен до сброса интервала (в конце четырех секунд), программа знает, как увеличить оценку «неправильный ответ» и сбросить поля вводадля следующего слова так же, как когда оно набрано правильно.Я приложил части своего кода, я думаю, что может быть актуальным.Если у кого-то есть предложения, дайте мне знать.Я стремлюсь учиться.** Я еще не знаком с JQuery.Пожалуйста, опишите любые предложения с использованием ванили JS

Answer 1

Чтобы ответить на ваш вопрос о индикаторе выполнения, вы устанавливаете интервал для запуска changeBar каждые 500 миллисекунд, что приводит к сбросу индикатора выполнения каждые полсекунды.Если вам нужна задержка перед запуском индикатора выполнения, используйте setTimeout.

Кроме того, вы запускаете индикатор выполнения для перемещения на 1% каждые 10 миллисекунд, что приведет к завершению индикатора в течение 1 секунды.Если вы хотите, чтобы панель завершилась за 4 секунды, установите интервал идентификатора для запуска каждые 40 миллисекунд.

Не видя CSS и HTML, я должен предположить, что вы используете правильные имена идентификаторов в своем коде, ноесли ничего не происходит, это также может быть причиной.

Я просмотрел код W3Shools, на который вы ссылаетесь, и попытался повторить то, что вы пытались сделать, и заставил это работать:

<html>
<head>
<style>
  #myProgress {
  width: 100%;
  background-color: #ddd;
  }

  #myBar {
    width: 1%;
    height: 30px;
    background-color: #4CAF50;
  }
</style>
</head>
<body>
<div id="myProgress">
  <div id="myBar"></div>
</div>
</body>
<script>
  function changeBar() {
   let proBar = document.querySelector('#myBar');
    var width = 1;
   var id = setInterval(frame, 40);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
      } else {
        width++;
        proBar.style.width =  width + '%';
      }
    }
  }
  setTimeout(changeBar, 100);
</script>
</html>

Answer 2

Одним из решений может быть создание новой функции (например: showWordBecauseTimeout) и вызов ее в вашем setInterval вместо showWord.И вызовите эту функцию в showWord fct вместо startGame fct.

Так что новый код будет выглядеть примерно так:

    function showWord() {
        clearInterval(timedWordDisplay);
        timedWordDisplay = setInterval(showWordBecauseTimeout, 4000);
        // you also need to move the cleaning of the input in the showWord fct
        // ...
    }

    function showWordBecauseTimeout() {
        numWordsWrong++;
        showWord()
    }

Надеюсь, что это поможет вам:).

Answer 3

Эта функция должна быть реализована в функции showWord.

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

Я бы сделал что-то вроде этого:

function showWord() {
  // At this point, the user has lost. We perform the according operations
  numWordsWrong++;
  answerBox.value = '';
  // etc.

  // What follows is the rest of the function you've already implemented
  let randomNum = Math.floor(Math.random()*wordsLevelOne.length);
  // etc.
}