無法訪問 javaScript 中的 setInterval 內的變量

Question

我想根據 15 秒計時器打印單詞，然后我想更改該單詞。

為此，我使用了一個單詞數組，然后使用隨機數生成器從數組中提取隨機單詞，使用隨機數作為數組索引值。

對於計時器，我使用 setInterval 作為時間函數，但是當我調用數組，即單詞並嘗試在屏幕上打印它時，我得到未定義的結果，即我無法訪問數組，即我的 setInterval 函數中的單詞

 function startTimer(duration, display) { var wordCount = 0; var wordNo = Math.floor((Math.random() * (59 - wordCount)) + 1); wordCount += 1; word.innerHTML = "<b>" + wordCount + ". " + words[wordNo] + "</b>"; words = words - words[wordNo]; var timer = duration, minutes, seconds; setInterval(function() { seconds = parseInt(timer % 60, 10); seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = seconds; if (--timer < 0) { timer = duration; } if (seconds == 5) { display.style.color = 'red'; } if (seconds > 5) { display.style.color = 'unset'; } if (seconds == 00) { wordNo = Math.floor((Math.random() * (59 - wordCount)) + 1); wordCount += 1; word.innerHTML = "<b>" + wordCount + " . " + words[wordNo] + "</b>"; words = words - words[wordNo]; } if (wordCount == 61) { let wrapper = document.querySelector('.wrapper'); wrapper.innerHTML = "<div class='text-center fs-3 mt-3 text-danger'>Test Ended</div>" } }, 1000); } var words = ["Scene", "Impossible", "Society", "Choose", "Unjust", "Image", "Exam", "Drive", "Internet", "Communication", "Keys", "Murder", "Commit", "Flee", "Practice", "Organize", "Phone", "New", "Agency", "Security", "Since", "Peace", "Fall", "Hi", "Run", "Chase", "Enter", "Industry", "Limit", "Development", "Coach", "Food", "Special", "Biomass", "Release", "Head", "Launch", "Medal", "Play", "Department", "Under", "Curb", "Cooperate", "HIke", "War", "Normal", "Challenge", "Serving", "Bane", "Rapid", "Actress", "obstacles", "Strict", "Forceful", "Citizens", "Team", "Anxious", "Knowledge", "Polite", "Integrity", "Serve", "Loyal", "Equality", "Justice", "Gratitude", "Rare", "Heavy", "Rude", "Explanation", "Pilot", "Pirate", "Ship", "Captain", "Camp", "Rights", "Ragging", "Rust", "Patriotism", "Primary", "Performance", "Pity", "Meeting", "Obedience", "Quick", "Quiet", "Quotes", "Question", "Try", "Unity", "Urge", "Friendship", "Close", "Migrate", "Decline", "Fly", "Highest", "Shall"] var display = document.querySelector('#time'); var word = document.querySelector('#word'); var fiveMinutes = 15; message = "1.60 words would be shown one by one.\r\n2.Each word will appear for only 15 seconds.\r\n3.The candidate has to read the word and write appropriate sentences at the same time.\r\n4.There will be no gap between two simultaneous words.\r\n5.The words can be positive or negative.\r\n6.The duration of WAT is 15 minutes." alert(message) startTimer(fiveMinutes, display);

 <script src="https://kit.fontawesome.com/bf341fb126.js" crossorigin="anonymous"></script> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="wrapper mt-5"> <header class="text-center pb-4 h1"> Word Association Test </header> <div class="text-center"> <i class="fa fa-clock-o fs-3" aria-hidden="true"></i> </div> <div id="time" class="text-center fs-3 mt-3"></div> <div id="word" class="text-center fs-3 mt-3"> </div> </div> <script src="JavaScript/script.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

Answer 1

您需要改組您的代碼以在函數之外擁有全局變量

也干燥，不要重復自己

最后使用數組的長度作為計數

我使用 splice 從數組中刪除單詞

 var words = ["Scene", "Impossible", "Society", "Choose", "Unjust", "Image", "Exam", "Drive", "Internet", "Communication", "Keys", "Murder", "Commit", "Flee", "Practice", "Organize", "Phone", "New", "Agency", "Security", "Since", "Peace", "Fall", "Hi", "Run", "Chase", "Enter", "Industry", "Limit", "Development", "Coach", "Food", "Special", "Biomass", "Release", "Head", "Launch", "Medal", "Play", "Department", "Under", "Curb", "Cooperate", "HIke", "War", "Normal", "Challenge", "Serving", "Bane", "Rapid", "Actress", "obstacles", "Strict", "Forceful", "Citizens", "Team", "Anxious", "Knowledge", "Polite", "Integrity", "Serve", "Loyal", "Equality", "Justice", "Gratitude", "Rare", "Heavy", "Rude", "Explanation", "Pilot", "Pirate", "Ship", "Captain", "Camp", "Rights", "Ragging", "Rust", "Patriotism", "Primary", "Performance", "Pity", "Meeting", "Obedience", "Quick", "Quiet", "Quotes", "Question", "Try", "Unity", "Urge", "Friendship", "Close", "Migrate", "Decline", "Fly", "Highest", "Shall"] var display = document.querySelector('#time'); var word = document.querySelector('#word'); var fiveMinutes = 15; message = "1.60 words would be shown one by one.\r\n2.Each word will appear for only 15 seconds.\r\n3.The candidate has to read the word and write appropriate sentences at the same time.\r\n4.There will be no gap between two simultaneous words.\r\n5.The words can be positive or negative.\r\n6.The duration of WAT is 15 minutes." let wordCount = 0 const getWord = () => { var len = words.length; var wordNo = Math.floor(Math.random() * wordCount); wordCount += 1; word.innerHTML = "<b>" + wordCount + ". " + words[wordNo] + "</b>"; words.splice(wordNo, 1); }; let tId; const wrapper = document.querySelector('.wrapper'); alert(message) getWord() startTimer(fiveMinutes, display); function startTimer(duration, display) { var timer = duration, minutes, seconds; tId = setInterval(function() { if (words.length === 0) { wrapper.innerHTML = "<div class='text-center fs-3 mt-3 text-danger'>Test Ended</div>" clearInterval(tId); return } seconds = parseInt(timer % 60, 10); seconds = seconds < 10 ? "0" + seconds : seconds; display.textContent = seconds; if (--timer < 0) { timer = duration; } if (seconds == 5) { display.style.color = 'red'; } if (seconds > 5) { display.style.color = 'unset'; } if (seconds == 00) { getWord() } }, 1000); }

 <script src="https://kit.fontawesome.com/bf341fb126.js" crossorigin="anonymous"></script> <!-- Bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="wrapper mt-5"> <header class="text-center pb-4 h1"> Word Association Test </header> <div class="text-center"> <i class="fa fa-clock-o fs-3" aria-hidden="true"></i> </div> <div id="time" class="text-center fs-3 mt-3"></div> <div id="word" class="text-center fs-3 mt-3"> </div> </div> <script src="JavaScript/script.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>