Javascript JS:setInterval运行时就像设置了多个间隔一样

所以，我一直在尝试找出JS，还有什么比做一个小项目更好的方法。这是一个小的琐事游戏，它有一个我用setInterval制作的问题计时器。不幸的是，在回答了多个问题之后，interval的行为变得非常奇怪——它每次运行两次命令。我猜这是我错误地实现了按钮按钮？ 顺便说一句，如果我的代码很糟糕的话，我很抱歉，我一直在不顾一切地修复这个问题，并且把它弄得一团糟

function startGame(){
    if (clicked === true){
        return;
    }
    else{
        $("#textPresented").html("Which anthem is this?");
        $("#button").css("display", "none");
        currentCountry = getRndInteger(0,8);
        console.log(currentCountry);
        var generatedURL = anthemnflags[currentCountry];
        console.log(generatedURL);
        audios.setAttribute("src", generatedURL);
        audios.play();
        $("#button").html("I know!");
        $("#button").css("display", "block");
        $("#button").click(function () { 
            continueManager();
    
        });
        
        y=10;
        console.log("cleared y" + y);
        x = setInterval(function(){
            y = y - 1;
           console.log("Counting down..." + y)
        }, 1000);
        console.log("INTERVAL SET");
    }

}

以下是控制台输出：

cleared y10 flaggame.js:59:17
INTERVAL SET flaggame.js:64:17
AbortError: The fetching process for the media resource was aborted by the user agent at the user's request. flaggame.js:49
Counting down...9 flaggame.js:62:20 ---- THESE TWO ARE BEING PRINTED AT THE SAME TIME
Counting down...8 flaggame.js:62:20 ---- THESE TWO ARE BEING PRINTED AT THE SAME TIME
Counting down...7 flaggame.js:62:20 
Counting down...6 flaggame.js:62:20
Counting down...5 flaggame.js:62:20
Counting down...4 flaggame.js:62:20
Counting down...3 flaggame.js:62:20
Counting down...2 flaggame.js:62:20
Counting down...1 flaggame.js:62:20
Counting down...0

我的代码的其余部分：

function middleGame(){
    $("#button").css("display", "none");
    var n = document.querySelectorAll(".flagc").length;
    correctIMG = getRndInteger(0,n-1);
    showFlags();
    var taken = new Array();
    for (var i = 0; i < n; ++i){
        if (i === correctIMG){
            images[i].attr("src", "res/" + flagsfiles[currentCountry]);
            taken[currentCountry] = true;
        }
        else{
            var randomFlag = getRndInteger(0, flagsfiles.length);
            if (randomFlag !== currentCountry && taken[randomFlag] !== true){
                images[i].attr("src", "res/" + flagsfiles[randomFlag]);
                taken[randomFlag] = true;   
            }
        }
    }
        $(".flagc").click(function(){
            clickregister(this);   
        });
}
function continueManager(){
    if (!clicked){
        audios.pause()
        clearInterval(x);
        x = 0;
        clicked = true;
        middleGame();
        return;
    }
}
function clickregister(buttonClicked){
        if ($(buttonClicked).attr("id") != correctIMG){
            points = points - 1;
            flagARR[$(buttonClicked).attr("id")].css("display", "none");
            console.log("INCORRECT");
        }
        else{
            if (y >= 0) {
                var addedPoints = 1 + y;
                points = points + addedPoints;
                
                $("#points").html(points);
            }
            else{
                points = points + 1;
            }
            hideFlags();
            clicked = false;
            startGame();
        }
}
$(function(){

hideFlags();
$("#textPresented").html("When you're ready, click the button below!");
$("#button").html("I am ready!");
$("#button").click(function () { 
    if (!gameStarted){
        gameStarted = true;
        alert("STARTING GAME");
        startGame();
    }

    
});
});

EDIT2：我的clickregister（）函数似乎被调用了两次，然后该函数调用了StartName（）两次

EDIT3：我找到了罪犯！这是以下几行代码：

    $(".flagc").click(function(){
        console.log("button" + $(this).attr("id") + "is clicked");
        clickregister(this);   
    });

---

它们会被调用两次，对于同一个按钮，您需要先清除间隔，然后再调用。您可以通过在事件侦听器范围之外创建一个变量来实现这一点，并在事件侦听器中检查该变量是否包含任何内容。如果是，则清除间隔x。清除间隔后，可以重置间隔

大概是这样的：

<button class="first" type="submit">Button</button>

const btn = document.querySelector('.first');
let x;

btn.addEventListener("click", () => {
    x && clearInterval(x)
    x = setInterval(() => console.log("yoo"), 500)
})

按钮
const btn=document.querySelector（'.first'）；
设x；
btn.addEventListener（“单击”，（）=>{
x&清除间隔（x）
x=setInterval（（）=>console.log（“yoo”），500）
})

这是因为如果不清除x的间隔，每次按下按钮都会创建一个新的间隔。

我修复了它！ 结果我所要做的就是添加

$(".flagc").unbind('click');

---

在.click（）函数之前

你能把它简化成一个在这里的代码片段中运行的please吗？只是一个粗略的猜测，也许你在类

flagc

中都嵌套了HTML元素，因此，单击内部的一个会触发两个标记上的单击事件？可能是偶然的-可能你有两个应该相邻的标记，但由于意外，标记没有正确关闭，第一个标记最终包含第二个标记。我非常确定我的标记一切正常，由于第一个和第二个问题在一些挖掘之后按照预期工作，似乎我的Clickregister函数被调用了两次，它也调用了StartName两次。我还仔细检查了我的HTML标记，它不应该单击twiceYep，我现在也看到了，否则每次游戏开始时，都会添加另一个侦听器

$(".flagc").unbind('click');