如何在JavaScript中仅执行一次函数

Question

我正在构建一个“星球大战搜索应用程序”，其中有一个对象包含“星球大战角色信息”。您可以使用映射函数动态地搜索对象，将其与正则表达式匹配，当用户搜索角色时触发。

这一切都很完美，但我添加了一个功能，让用户可以单击一个角色（例如卢克·天行者），然后将HTML附加到视图中，并添加有关卢克的信息。我无法让此功能仅触发一次，用户可以多次单击角色，它将继续添加相同的内容。

我该如何只允许用户单击

一次，以便函数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();
}

- The Grey Wolf

Answer 1

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" />

- Mamun

Answer 2

您可以检查它是否已经插入。

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

}

- Majid Laissi