Как запретить повторение функции при изменении отображения на скрытие - PullRequest
Новая
       46

Как запретить повторение функции при изменении отображения на скрытие

0 голосов
/ 18 июня 2020

Это моя startQuiz() функция, привязанная к кнопке запуска.

Я нажимаю кнопку «Пуск», чтобы настроить отображение моей викторины на гибкость. Проблема здесь в кнопке отправки.

Когда я нажимаю кнопку отправки и запускаю submit (), все работает и 1 регистрируется в консоли.

Проблема возникает, когда я запускаю closeQuiz(), который просто меняет отображение викторины на «Нет». После запуска startQuiz() для сброса дисплея на гибкость при выполнении submit () консоль дважды регистрируется.

Этот шаблон продолжается, где каждый раз, когда я запускаю closeQuiz() и снова открываю викторину, submit () запускается все больше и больше раз.

Пожалуйста, помогите мне запустить 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)
    }

Ответы [ 2 ]

1 голос
/ 18 июня 2020

Каждый раз, когда вы запускаете startQuiz (), к кнопке отправки добавляется прослушиватель событий. При первом вызове startQuiz () вы добавляете прослушиватель событий. После closeQuiz (), когда вы вызываете startQuiz () для сброса отображения на гибкость, для кнопки отправки второй раз добавляется прослушиватель событий, что приводит к тому, что консоль регистрируется дважды с 1 и т. Д.

Добавить прослушиватель событий сначала отправить кнопку только один раз или удалить прослушиватель событий при вызове closeQuiz ().

0 голосов
/ 18 июня 2020

Проблема в том, что в вашем коде всякий раз, когда вызывается populateAnswers, новый прослушиватель событий для click добавляется к элементу с идентификатором submit, поскольку прослушиватель добавляется как анонимная функция. Поскольку анонимные функции не идентичны, даже если они определены с использованием ОДНОГО неизменного исходного кода, который просто вызывается повторно, даже если в al oop. Поэтому каждый раз добавляется еще одна функция в качестве нового слушателя.

Для решения проблемы отправьте ссылку на метод submit в качестве слушателя, который не будет добавлять несколько слушателей, даже если функция вызывается несколько раз. Поскольку если несколько идентичных EventListenerов зарегистрированы в одном EventTarget с одинаковыми параметрами, дублирующиеся экземпляры отбрасываются. Они не вызывают двойного вызова EventListener, и их не нужно удалять вручную с помощью метода removeEventListener ().

Изменение кода с помощью приведенной ниже реализации решит проблему, с которой вы столкнулись. лицом. 

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

Надеюсь, это поможет.

...