香草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數組更多的例子）