Блог

Главная - Вопросы по программированию - прослушиватель событий в цикле for выполняется одновременно, а не по одному, как это исправить?

прослушиватель событий в цикле for выполняется одновременно, а не по одному, как это исправить?

#javascript #html

Вопрос:

Я новичок в JavaScript и пытаюсь это понять. Это пример того, с чем я борюсь.

 for (let i = 0; i < 3; i  ) {
  test();
  console.log("2");
}


function test() {
  document.getElementById("Button").addEventListener("click", () =>
    console.log("1"));
} 
 <button id="Button">BUTTON</button>

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

Как бы я это сделал? Я потратил так много времени и не могу этого понять.

Комментарии:

1. Почему вы вызываете test() функцию в цикле for?

2. console.log("2") является частью for цикла. Конечно, он запустится немедленно. Если вы хотите, чтобы он запускался после щелчка, добавьте его в прослушиватель событий после console.log("1")

Ответ №1:

Прямо сейчас вы выполняете этот цикл с 3 итерациями в начале. Это означает, что 2 регистрируется 3 раза. Также вы добавляете 3 функции-списка событий к этой кнопке, когда цикл повторяется в начале, вызывая test(). Поэтому, когда вы нажимаете кнопку, функция обратного вызова в функции addEventListener должна регистрироваться 3 раза по 1, если она не перезаписывается.

Ответ №2:

Прослушиватель событий имеет параметр «один раз» в параметрах, если вам нужно, чтобы функция срабатывала только один раз. Но если вам нужно 3 или более раз, вы можете создать счетчик и удалить прослушиватель событий вручную:

 let button = document.getElementById("Button")
let counter = 0

function test() {
  if (counter < 3) {
    console.log("2");
    counter  
  } else {
    button.removeEventListener("click", this)
  }
}

button.addEventListener("click", (console.log("1"), test)); 
 <button id="Button">BUTTON</button>
Метки: , ,