Как запустить функцию только один раз в JavaScript

Question

Я создаю Приложение поиска Star Wars , где у меня есть объект, полный Информация о персонаже Star Wars . Вы можете динамически искать объект, используя функцию карты, которая соответствует емуРегулярное выражение, которое срабатывает, когда пользователь ищет персонажа.

Это все работает отлично, но я добавил функциональность для пользователя, чтобы щелкнуть по персонажу (например, Люк Скайуокер )затем добавит HTML к представлению и добавит информацию, касающуюся Luke .Я изо всех сил пытаюсь заставить эту функцию срабатывать только один раз, пользователь может нажимать несколько раз на персонаже, и он будет продолжать добавлять одно и то же содержимое.

Как разрешить пользователю нажимать только <li>один раз, чтобы функция displayInfo() сработала один раз.

Спасибо за помощь.

var newView = document.querySelector(".starwars");

function displayInfo() {

    newView.innerHTML += `
      <div class="jedi">
      <div class="image-wrapper">
          <img id="swImage"src="img"
              class="thumb reserved-ratio" alt="Luke Skywalker">
      </div>
      <div class="desc-sizer">
          <p class="desc">Luke Skywalker was a Tatooine farmboy who rose from humble beginnings to become one of the greatest Jedi the galaxy
              has ever known.
          </p>
      </div>
    </div>
      `;
    searchInput.value = 'Luke Skywalker';
    searchInput.addEventListener("focus", displayMatches);
    searchInput.focus();
}

Answer 1

Вы можете проверить, вставлен ли он уже.

if (newView.innerHTML.indexOf("Luke Skywalker") < 0) {
    // code to insert 

}

Answer 2

EventTarget.addEventListener() Параметры :

Опции: Опционально

once: логическое значениеуказывая, что слушатель должен быть вызван не более одного раза после добавления.Если true, слушатель будет автоматически удален при вызове.

Вы можете передать { once: true } addEventListener() в качестве третьего параметра:

searchInput.addEventListener("focus", displayMatches, { once: true });

Демо:

function displayInfo() {
  var searchInput = document.querySelector('.searchInput');
  searchInput.value = 'Luke Skywalker';
  searchInput.addEventListener("focus", displayMatches, {once: true});
  searchInput.focus();
}
displayInfo();
function displayMatches(){
  alert('This function will be invoked only once!!!');
}

<input class="searchInput" />