<分区>
我的目标是每四秒显示一次数组中的一个词,除非用户在不到四秒的时间内正确键入该词,在这种情况下,间隔将被清除并重新启动。当我单击开始时,在显示单词之前四秒钟过去了。我希望它立即显示,此后每四秒显示一次,除非用户在四秒之前键入正确的单词,在这种情况下,间隔被清除并重新启动,在这种情况下,在显示下一个单词之前有四秒的延迟。为什么interval跑完count一次才执行 Action 。我怎样才能解决这个问题?我不熟悉jquery所以请在js中提供一些建议`
startBtn.addEventListener('click', startGame);
answerBox.addEventListener('keyup', checkWord);
function startGame() {
//showWord();
gameTimer = setInterval(gameTime, 1000);
timedWordDisplay = setInterval(showWord, 4000);
}
function checkWord() {
let currentWordLen = answerBox.value.length;
if (wordDisplayBox.innerHTML === answerBox.value) {
clearInterval(timedWordDisplay);
numWordsRight++;
numGoodWordsField.innerHTML = numWordsRight;
answerBox.value = '';
answerBox.focus();
wordDisplayBox.innerHTML = '';
timedWordDisplay = setInterval(showWord, 4000);
} else if (answerBox.value === currentWord.substring(0, currentWordLen)) {
answerBox.style.borderColor = 'green';
} else {
answerBox.style.borderColor = 'red';
}
}
/* function checkWord() {
let currentWordLen = answerBox.value.length;
if (wordDisplayBox.innerHTML === answerBox.value) {
clearInterval(showWord);
goodScore++;
numGoodWordsField.innerHTML = goodScore;
answerBox.value = '';
answerBox.focus();
setInterval(showWord,4000);
} else if (answerBox.value === currentWord.substring(0,currentWordLen)) {
answerBox.style.backgroundColor = 'green';
} else {
answerBox.style.backgroundColor = 'red';
}
}
*/
function showWord() {
answerBox.focus();
console.log('show word func start');
console.log('seconds between ' + time);
let randomNum = Math.floor(Math.random()*wordsLevelOne.length);
console.log('random number is:' + randomNum);
currentWord = wordsLevelOne[randomNum];
console.log('curentWord is ' + currentWord);
wordDisplayBox.innerHTML = currentWord;
//setInterval(wordTime, 1000);
//showWord();
}