无法访问setInterval中的javaScript变量

Question

我想按照15s计时器打印这个单词，然后我想改变那个单词。

为此，我需要一个单词数组，然后使用一个随机数生成器，以随机数作为数组的索引值，从数组中提取随机单词。

对于计时器，我使用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

您需要调整代码，才能使功能之外的全局vars。

也是干的，不要重复

最后，使用数组的长度作为计数。

我使用剪接将单词从数组中删除。

​

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>

​