香草javascript - 在通过函数旋转的两个数组之间切换

Question

我正在为孩子们进行数学测验。 我有一个功能，在页面加载时，通过一组图像旋转。我的目标是，如果答案是正确的，那么在恢复原始设置之前，它将通过一组不同的图像旋转一次。 我已经设法让它更改为第二套，但我一直试图让它只能通过这些图像旋转一次，然后再恢复到原始图像。我已经尝试了几件事情，包括： 1.使用if语句在两个数组之间进行切换，但完全没有响应，根本没有更改图片。 2.我做了一个新的函数，它改变了第一个数组的实际内容，但是在它经过一次图像之后我无法将它改回来。

对JavaScript的代码如下（抱歉，这是从我尝试所有不同的东西凌乱）：

// Starting animation 
window.addEventListener("load", normalAnimation); 

var images = ['01.png', '02.png', '01.png', '02.png', '03.png', '01.png', '02.png', '01.png','04.png']; 
var images2 = ['catchfish01.png', 'catchfish02.png', 'catchfish03.png', 'catchfish04.png', 'catchfish05.png', 'catchfish06.png','catchfish07.png']; 
var imageNumber = 0; 
var pic1 = document.getElementById('pic1'); 

var normalAnimation = function() { 

//Here I attempted to change the images used but only initiates the code in the else part. The actual change of images used is done with the catchFish function below. 
    var feedBack = document.getElementById("feedBack"); 
    if(feedBack.textContent == "Well Done!"){ 
     setInterval(function() { 
      pic1.src = images2[imageNumber]; 
      imageNumber++; 
      if (imageNumber > images2.length-1) { 
       pic1.src = images[imageNumber]; 
       imageNumber++;} 
     },2000); 
    } 
    else {setInterval(function() { 
     pic1.src = images[imageNumber]; 
     imageNumber++; 
     if (imageNumber > images.length -1) { 
      imageNumber = 0;} 
     },2000); 
    } 
} 

requestAnimationFrame(normalAnimation); 

// Making the question 

document.getElementById("button1").addEventListener("click", question); 

var plusMinus = document.getElementById("plusMinus"); 
var counter = 0; 

function question(){ 
    var startButton = document.getElementById("button1"); 
    var number1 = document.getElementById("num1"); 
    var number2 = document.getElementById("num2"); 
    var decider = Math.random(); 
    var answer = document.getElementById("answer"); 
    counter ++; 

    if(decider<0.5){ 
     plusMinus.textContent = "+" 
    } 
    else{plusMinus.textContent = "-"}; 

    startButton.textContent = "Round" + " " + counter; 
    number1.textContent = Math.floor(Math.random()*11); 
    number2.textContent = Math.floor(Math.random()*11); 
    equals.textContent = "="; 

    if(plusMinus.textContent == "-" && parseInt(number2.textContent) > parseInt(number1.textContent)) { 
     console.log('swapped'); 
     var a = number2.textContent; 
     number2.textContent = number1.textContent; 
     number1.textContent = a; 
    }; 

    if(startButton.textContent == "Round" + " " + 11){ 
     startButton.textContent = "Start Again"; 
     counter = 0; 
     number1.textContent = " "; 
     plusMinus.textContent = " "; 
     number2.textContent = " "; 
    } 
    answer.textContent = " "; 
}; 

// Answering the question 

document.getElementById("button2").addEventListener("click", answer); 

var totalScore = 0; 

function answer(){ 
    var num1 = parseInt(document.getElementById("num1").textContent, 10); 
    var num2 = parseInt(document.getElementById("num2").textContent, 10); 
    var answer = parseInt(document.getElementById("answer").value, 10); 
    var feedBack = document.getElementById("feedBack"); 
    var scoreReport = document.getElementById("score"); 

    if (plusMinus.textContent == "+"){ 
     if(answer == num1 + num2) { 
      feedBack.textContent = "Well Done!"; 
      totalScore = totalScore + 10; 
      if(feedBack.textContent== "Well Done!"){ 
       setTimeout(function() {feedBack.textContent = " "; 
      }, 2000); 
     } 
     //Used to call the function that changes the array contents 
     catchFish(); 

     } else { 
      feedBack.textContent = "Try again!"; 
      if(feedBack.textContent == "Try Again!"){ 
       setTimeout(function() {feedBack.textContent = " " 
       }, 2000); 
      } 
     } 
    } else { 
    if(answer == num1 - num2){ 
     feedBack.textContent = "Well Done!"; 
     if(feedBack.textContent== "Well Done!"){ 
      setTimeout(function() {feedBack.textContent = " "; 
      }, 2000);} 
     totalScore = totalScore +10; 
    } else { 
     feedBack.textContent = "Try Again!"; 
     if(feedBack.textContent == "Try Again!"){ 
      setTimeout(function() {feedBack.textContent = " " 
      }, 2000); 
     } 
     } 
    } 
scoreReport.textContent = "Score:" + totalScore; 
}; 

//This function changes the contents of the array to the second set of images 
function catchFish() { 
    imageNumber = 0; 
    images = ['catchfish01.png', 'catchfish02.png', 'catchfish03.png', 'catchfish04.png', 'catchfish05.png', 'catchfish06.png','catchfish07.png']; 
    if(pic1.src == 'catchfish07.png'){ 
     images = ['01.png', '02.png', '01.png', '02.png', '03.png', '01.png', '02.png', '01.png','04.png']; 
    } 
} 

谢谢你在先进的帮助。

Answer 1

可能最干净的解决方案是维护将要显示的图像的下一个queue。在每个时间间隔，则shift第一图像从队列，并且如果队列为空，添加一个新的图像组到队列：

var queue = []; 
setInterval(function() { 
    if (queue.length < 1) { 
     queue = ['01.png', '02.png', '01.png', '02.png', '03.png', '01.png', '02.png', '01.png', '04.png']; 
    } 
    pic1.src = queue.shift(); 
}, 2000); 

然后，暂时切换到不同的一组图像，你只需更换队列的内容：

function catchFish() { 
    queue = ['catchfish01.png', 'catchfish02.png', 'catchfish03.png', 'catchfish04.png', 'catchfish05.png', 'catchfish06.png', 'catchfish07.png']; 
} 

现在setInterval()程序将通过队列的新内容运行，一旦到达终点，它会返回到原来的图像旋转。

---

ps。提示：如果您更愿意定义函数以外的图像列表，你可以使用slice()将它们复制到队列中，像这样：

var images = ['01.png', '02.png', '01.png', '02.png', '03.png', '01.png', '02.png', '01.png', '04.png']; 
var images2 = ['catchfish01.png', 'catchfish02.png', 'catchfish03.png', 'catchfish04.png', 'catchfish05.png', 'catchfish06.png', 'catchfish07.png']; 

var queue = []; 
setInterval(function() { 
    if (queue.length < 1) queue = images.slice(); 
    pic1.src = queue.shift(); 
}, 2000); 

function catchFish() { 
    queue = images2.slice(); 
} 

（如果你只是做了queue = images;没有使用.slice()，这将使queue为images的别名，所以queue.shift()最终会修改原始images阵列。使用.slice()，而不是给你images阵列，可以安全地分配到queue的副本。见Array class documentation on MDN对于如何处理JavaScript数组更多的例子）