功能仅在第一次单击时运行？

Question

我正在为我为大学开发的 ctf 游戏网站制作排行榜。我开始玩一些简单的动画，发现了一些我无法弄清楚的错误： 1.您必须在登录按钮或添加按钮上单击两次才能第一次实际工作。 2. 提交错误答案时，动画只播放一次，之后的任何错误答案都没有任何反应。

这是页面的链接：https://nerdts-4ed61.firebaseapp.com/leaderboards.html

<footer>
    <h6 class="right-ans">
      Correct! Your progress will be added to your account.
    </h6>
  </br>
    <div id="addFlagInput" class="input-group">
      <div class="input-group-prepend">
        <span
          class="input-group-text"
          style="background: transparent; color: white; border-top: none; border-left: none; border-bottom: none; border-width: 2px; border-color: rgba(0,0,0,0.09);"
          id=""
          >Name and flag</span
        >
      </div>
      <input
        id="inputbox1"
        type="text"
        class="form-control transparent-input"
      />
      <input
        id="inputbox2"
        type="text"
        class="form-control transparent-input"
      />
      <div class="input-group-append">
        <button
          id="submitBtn"
          onclick="submit()"
          class="btn btn-light"
          style="background: transparent; color: white; border-color: rgba(0,0,0,0.09);"
          type="button"
        >
          Submit
        </button>
      </div>
    </div>
  </footer>
</div>    
 <!--ANIMATION LOGIN BTN-->
<script>
  function addFlag() {
    const element = document.querySelector("#addFlagBtn");
    element.classList.add("animated", "fadeInDown");
    const display = element.style.display;
    if (display == "none") {
      element.style.display = "block";
    } else {
      element.style.display = "none";
    }
  }
</script>
<!--check user state for flag add-->
<script>
  function isUser() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        //show input form
        const inElement = document.querySelector("#addFlagInput");
        inElement.classList.add("animated", "fadeInUp");
        const visibility = inElement.style.visibility;
        if (visibility == "hidden") {
          inElement.style.visibility = "visible";
        } else {
          inElement.style.visibility = "hidden";
        }
      } else {
        //tooltip: you must register to add a flag
        const element = document.querySelector("#addFlagBtn");
        element.setAttribute("title", "You must register to add a flag.");
      }
    });
  }
</script>
<!--Submit button functionality-->
<script>
  function hideText() {
    document.querySelector(".right-ans").style.display = "none";
  }
  function submit() {
    const submitElement = document.querySelector("#inputbox2");
    const answer = submitElement.value;
    console.log("Your answer is: ", answer);
    var database = firebase.database();
    var dbRef = database.ref("flags/");
    dbRef.orderByKey().on("value", snapshot => {
      if (snapshot.exists()) {
        snapshot.forEach(function(data) {
          var val = data.val();
          if (val.id == answer) {
            document
              .querySelector(".right-ans")
              .classList.add("animated", "heartBeat");
            document.querySelector(".right-ans").style.display = "inline";
            console.log("correct!");
            setTimeout(hideText, 5000);
          }
          else {
            const inputdiv = document.querySelector("#addFlagInput");
            inputdiv.classList.remove("fadeInUp");
            inputdiv.classList.add("animated","swing");
          }
        });
      }
    });
  }
</script>

Answer 1

是什么

dbRef.orderByKey().on("value", snapshot => {
  if (snapshot.exists()) {
    snapshot.forEach(function(data) {

做吗？看起来您拥有在 firebase 事件侦听器中实际添加或删除类的代码。每次运行函数时，内部的变量或函数都会再次创建，并且每当您到达该函数的末尾或范围之外，如果该变量是在该范围内创建的并且没有分配给外部的任何其他变量，它被摧毁了。

因此，每次您的提交函数运行时，都会再次创建类似于 firebase 的事件。

该事件仅在您第二次单击按钮时运行，因为该事件尚不存在，在您第一次单击按钮时，因为它仅在第一次 submit() 发生后才存在。