javascript - 查询/JavaScript : Countdown Timer acting erratically

Question

我正在尝试使用带有定时问题的 javascript 进行简单的测验。每个问题持续 10 秒，然后再继续下一个问题。倒数计时器对第一个问题表现良好，之后它开始加速或显示后续问题的随机数。这是我的代码，附言对于低效和繁忙的代码，我深表歉意，我对 javascript 还是个新手，一旦我解决了这个问题，我会让代码更加精简。

var questionList = [
        {
            q:"What is a dog?",
            a:["fish","mammal","plant","prokaryote"],
            answer: 1
        },
         {
            q:"What is a cat?",
            a:["mammal","fish","plant","amphibian"],
             answer: 0
        },
         {
            q:"What is a tree?",
            a:["plant","fish","mammal","none"],
             answer: 0
        },
         {
            q:"What do cars run on?",
            a:["gasoline","water","ethanol","liquid oxygen"],
             answer: 0
        },
        {
            q:"What is 4 x 4?",
            a:["8","16","4","160"],
            answer: 1
        },
        {
            q:"What is the capital of Australia?",
            a:["Brisbane","GoldCoast","Perth","Canberra","Melbourne"],
            answer: 3
        },
        {
            q:"What is the national flower of Canada?",
            a:["sunflower","daisy","trillium","rose","lotus"],
            answer: 2
        }
    ];
    //--------------------------------------
    var picked;
    var qcount = 0;
    var output = [];
    var timer;
    var timer2;
    var timeLeft = 10;
    var correctQ = 0;
    var wrongQ = 0;
    //var randomQ = Math.floor(Math.random()*7);
    var x = questionList[qcount];
    var j = x.answer;
   // var cAns = x.a[j];
    //console.log(cAns);
    console.log(j);
    //new Q w/ options
    function qGen(){
        timer = setInterval(time, 1000)
        $('#question').text(x.q);
        for (var i=0; i < (x.a).length; i++){
            var newLi = $('<button>');
            newLi.attr('data-id', i);
            newLi.addClass("answer").text(x.a[i]);
            $('#list').append(newLi);
        }
    }
    qGen();
    // correct answer
    function clickChoice(){
      $('#list').on("click",'button', function(){
          picked = parseInt($(this).attr("data-id")); 
          console.log(picked + "    click");
           if (picked === j){
               console.log(j + "    if");
               qcount++;
               x = questionList[qcount]; 
               j = x.answer;
               qGen();
               correct();
           }else{
               qcount++;
               incorrect();
                x = questionList[qcount]; 
               j = x.answer;
               qGen();
           }
    })
    }
    clickChoice();
    //timer
    function time(){
        timeLeft--;
        $('#time').text(timeLeft);
        if(timeLeft===0){
            $('#score').text('TIME UP');
             timer2 = setInterval(timeUp, 2000);
        }
    }
    //time up
    function timeUp(){
        clearInterval(timer);
        wrongQ++;
        qcount++;
        x = questionList[qcount]; 
        j = x.answer;
        clearInterval(timer2);
        nextQ();
    }
    //correct
    function correct(){
        clearInterval(timer);
        clearInterval(timer2);
        $("#list").text("");
        correctQ++;
        nextQ();
    }
    //incorrect
    function incorrect(){
        clearInterval(timer);
        clearInterval(timer2);
        $("#list").text("");
        wrongQ++;
        nextQ();
    }
    //next question gen
    function nextQ(){
        timeLeft= 10;
        $('#score').text("");
        $('#ca').text("");
        $('#question').text(x.q);
        //$("#time").text(timeLeft);
        $("#list").text("");
        qGen();
    }

Answer 1

下面是您的代码的修改版本，应该可以解决您的问题。

注意事项

• 我对您的 HTML 做了一些简单的假设和 CSS
• 我还没有实现score更新，但鉴于以下内容，这应该是直截了当的

const questionList = [
  {
    q: 'What is a dog?',
    a: ['fish', 'mammal', 'plant', 'prokaryote'],
    answer: 1
  },
  {
    q: 'What is a cat?',
    a: ['mammal', 'fish', 'plant', 'amphibian'],
    answer: 0
  },
  {
    q: 'What is a tree?',
    a: ['plant', 'fish', 'mammal', 'none'],
    answer: 0
  },
  {
    q: 'What do cars run on?',
    a: ['gasoline', 'water', 'ethanol', 'liquid oxygen'],
    answer: 0
  },
  {
    q: 'What is 4 x 4?',
    a: ['8', '16', '4', '160'],
    answer: 1
  },
  {
    q: 'What is the capital of Australia?',
    a: ['Brisbane', 'GoldCoast', 'Perth', 'Canberra', 'Melbourne'],
    answer: 3
  },
  {
    q: 'What is the national flower of Canada?',
    a: ['sunflower', 'daisy', 'trillium', 'rose', 'lotus'],
    answer: 2
  }
];
//--------------------------------------
let picked;
let qcount = 0;
const output = [];
let timer;
const startingTime = 10;
let timeLeft;
let correctQ = 0;
let wrongQ = 0;
// var randomQ = Math.floor(Math.random()*7);
// let x = questionList[qcount];
// let j = x.answer;
// var cAns = x.a[j];
// console.log(cAns);
// console.log(j);

// next question gen
function nextQ() {
  timeLeft = 10;
  document.querySelector('#score').textContent = '';
  // document.querySelector('#ca').textContent = '';
  document.querySelector('#question').textContent = questionList[qcount].q;
  // $("#time").text(timeLeft);
  document.querySelector('#list').textContent = '';
  qGen();
}

// time up
function timeUp() {
  clearInterval(timer);
  wrongQ += 1;
  qcount += 1;
  nextQ();
}

// correct
function correct() {
  clearInterval(timer);
  correctQ += 1;
  nextQ();
}

// incorrect
function incorrect() {
  clearInterval(timer);
  wrongQ += 1;
  nextQ();
}

// timer
function time() {
  timeLeft -= 1;
  document.querySelector('#time').textContent = timeLeft;
  if (timeLeft === 0) {
    document.querySelector('#score').textContent = 'TIME UP';
    timeUp();
  }
}

// Add EventListener to each button
function addEL(el) {
  el.addEventListener('click', event => {
    picked = parseInt(event.currentTarget.getAttribute('data-id'), 10);
    console.log(`${picked} click`);
    const correctAnswer = questionList[qcount].answer;
    qcount += 1;
    if (picked === correctAnswer) {
      console.log(`${correctAnswer} if`);
      correct();
    } else {
      incorrect();
    }
  });
}

// new Q w/ options
function qGen() {
  const x = questionList[qcount];
  timeLeft = startingTime;
  document.querySelector('#time').textContent = startingTime;
  document.querySelector('#question').textContent = x.q;
  for (let i = 0; i < x.a.length; i += 1) {
    const newLi = document.createElement('li');
    const answer = document.createElement('button');
    answer.setAttribute('data-id', i);
    answer.classList.add('answer');
    answer.textContent = x.a[i];
    addEL(answer);
    newLi.appendChild(answer);
    document.querySelector('#list').appendChild(newLi);
  }
  timer = setInterval(time, 1000);
}

document.addEventListener('DOMContentLoaded', () => {
  qGen();
});

.answer {
  background-color: yellow;
}

<div>
  Question:
  <span id="question">XXX</span>
</div>
<div>
  Time:
  <span id="time">XXX</span>
</div>
<div>
  Score:
  <span id="score">XXX</span>
</div>
<div>
  <ul id="list">
  </ul>
</div>

以下是我所做的更改，包括一些关于 JavaScript 良好实践的提示。

代码逻辑

• 您正在调用 qGen两次，每次点击有效地旋转两个新的间隔
• 必须为所有按钮添加事件监听器
• 不需要第二个计时器
• 仅<li> <ul> 中允许元素/<ol>
  • 在 <li> 中放置其他元素(如您的按钮)完全没问题。 s.
  • 如果您愿意，您也可以采用不同的格式(例如在一行中)
• 避免在 DOM 树完成加载之前对 DOM 进行操作
  • 查看添加的 DOMContentLoaded事件监听器
• output , correctQ , wrongQ : 这些分配的值永远不会在您的代码中使用

良好做法

• 避免使用一元运算符++ 和 --
  • 自动分号插入可以 break your code
• 在调用之前定义函数
• 在完全熟悉 vanilla JavaScript 之前不要使用 jQuery(或其他抽象)
• 比匿名函数更喜欢箭头函数
  • 使用event.currentTarget而不是 this内部事件监听器