将显示更改为隐藏时如何阻止功能重复

Question

这是我的 startQuiz() 函数，它绑定到开始按钮。

我单击开始按钮将我的测验显示设置为 flex。这里的问题与提交按钮有关。

当我单击提交按钮并运行提交 () 时，一切正常，并且 1 已登录到控制台。

当我运行 closeQuiz() 只是将测验显示改回 none 时，问题就出现了。在运行ning startQuiz() 将显示重置为 flex 之后，运行ning submit() 导致控制台记录两次。

这种模式一直持续到每次我运行 closeQuiz() 并重新打开测验时， submit() 结束的次数越来越多运行。

请帮我运行只提交一次，谢谢。

function startQuiz(){
    quizBox.classList.remove("hide");
    populateAnswers();
}

function closeQuiz(){
    quizBox.classList.add("hide");
}

function populateAnswers(){
    document.getElementById("submit").addEventListener("click" , () => {
        submit();}
        )
}

function submit(){
    console.log(1)
    }

Answer 1

每次您运行 startQuiz() 时，都会将一个事件侦听器添加到提交按钮。第一次调用 startQuiz() 时，您添加一个事件侦听器。在 closeQuiz() 之后，当您调用 startQuiz() 将显示重置为 flex 时，事件侦听器被添加到第二次提交按钮，这导致控制台使用 1 记录两次，依此类推。

最初仅向提交按钮添加事件侦听器一次，或者在调用 closeQuiz() 时删除事件侦听器。

Answer 2

问题是因为在您的代码中，每当调用 populateAnswers 时，都会将 click 的新事件侦听器添加到 ID 为 submit 的元素中，因为正在添加侦听器作为匿名函数。因为匿名函数并不相同，即使使用相同的不变源代码简单地重复调用定义，即使在循环中也是如此。因此，每次添加一个新的函数作为新的监听器。

为了解决此问题，send submit 方法将自身引用为侦听器，即使该函数被多次调用，也不会添加多个侦听器。因为如果在同一个EventTarget上注册了多个相同的EventListener，参数相同，那么重复的实例就会被丢弃。它们不会导致 EventListener 被调用两次，并且不需要使用 removeEventListener() 方法手动删除它们。

通过使用以下实现更改代码将解决您面临的问题。

function populateAnswers(){
    document.getElementById("submit").addEventListener("click" , submit)
}

希望对您有所帮助。

将显示更改为隐藏时如何阻止功能重复

How to stop a function from repeating when changing the display to hide

javascript

event-handling

addeventlistener