在另一个函数的 if 中调用匿名函数

Question

如果基本表单的用户名未填写，我正在尝试 "insert" 警报器，我一直无助地试图理解为什么提交函数中的匿名函数没有被调用。

我的 html 之上的 JIC 我有一个准备好的警报块：

<div id="alerter">
</div>

有问题的函数：

<script>
  function validateForm() {
    var x = document.forms["formz"]["username"].value;
    if (x == "") {
      (function() {
        alert("whoa");
        var div = document.createElement('div');
        div.setAttribute('class', 'alert alert-primary alert-dismissible fade show');
        div.setAttribute('role', 'alert');
        div.innerHTML = document.getElementById('alertonempty').innerHTML;
        document.getElementById('alerter').appendChild(div);
      })
      return false;
    }
  }
</script>

<script id="alertonempty" type="text/html">
  <strong>SMTH went wrong</strong> Seriously wrong
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</script>

是的，有一个调用 validateForm 的表格。它确实采用用户名变量并可以使用它（也通过警报检查它）但是匿名函数不会被调用。

请帮我理解

Answer 1

您创建的是一个auto-executing anonymous function，为了使该功能正常工作，您需要在末尾添加第二对括号：

function validateForm() {
    var x = document.forms["formz"]["username"].value;
    if (x == "") {
      (function() {
        alert("whoa");
        var div = document.createElement('div');
        div.setAttribute('class', 'alert alert-primary alert-dismissible fade show');
        div.setAttribute('role', 'alert')
        div.innerHTML = document.getElementById('alertonempty').innerHTML;
        document.getElementById('alerter').appendChild(div);
      })();
//-----^^^^
      return false;
    }
  }

Answer 2

在 JavaScript 中，函数声明是 "hoisted"（请参阅此处：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting），因此在 "if" 块中声明函数的位置并不重要或者在 validateForm 函数的顶部 - 顺便说一句，这是做事的正确方法 "JavaScript way".

在你的例子中，你声明了匿名函数但从未真正调用过它。您的表达式被评估为一个新的匿名函数，该函数被愉快地提升并且永远不会被使用。以下是您应该做的：

function validateForm() {
  function showAlert() {
    alert("whoa");
    var div = document.createElement('div');
    div.setAttribute('class', 'alert alert-primary alert-dismissible fade show');
    div.setAttribute('role', 'alert')
    div.innerHTML = document.getElementById('alertonempty').innerHTML;
    document.getElementById('alerter').appendChild(div);
  }

  var x = document.forms["formz"]["username"].value;
  if (!x) {
      showAlert();
      return false;
  }
}

或者，您可以将函数声明转换为 IIFE（即使在这种特殊情况下这是一种非常糟糕的形式）：

(function(){....})();

在另一个函数的 if 中调用匿名函数

Calling an anonymous function within if of another function

javascript

anonymous-function