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

Question

我正在为 children 做一个数学测验。我有一个功能，可以在页面加载时旋转一组图像。我的目标是，当答案正确时，它将在一组不同的图像中旋转一次，然后再恢复到原始图像组。我已经设法让它变成第二组，但我一直试图让它在恢复到原始图像之前只旋转一次这些图像。我尝试了几件事，包括: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() 例程将遍历队列的新内容，一旦到达末尾，它将返回到原始图像旋转。

---

附言。提示:如果您更愿意在函数外定义图像列表，您可以使用 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。有关如何操作 JavaScript 数组的更多示例，请参阅 Array class documentation on MDN。)