Question

我刚刚了解了函数，并且正在尝试测试一个简单的函数：

<button id="testbutton">test</button>
<script type="text/javascript">
  var testTime = ""

  function alertTime(inputTime) {
    inputTime = Date.now();
    alert(inputTime);
  }
  document.getElementById("testbutton").onclick = alertTime(testTime);
</script>

为什么加载页面后立即显示警报，而不是单击按钮时显示？

Answer 1

立即使用()调用/调用函数。您必须在匿名函数内部调用/调用该函数。

更改

document.getElementById("testbutton").onclick = alertTime(testTime);

收件人

document.getElementById("testbutton").addEventListener('click', function(){ alertTime(testTime) });

Answer 2

为什么我在加载页面后立即显示警报

JS解释器找到<script>标签来解析页面并执行其中包含的内容。在内部使用参数alertTime()调用testTime（函数名+（）导致函数调用）。然后执行进入alertTime()，在其中调用浏览器环境的功能alert()，您最终会看到消息。

Answer 3

实际上，您并没有绑定功能，而是执行功能的结果，这就是您具有这种副作用的原因。

现在您可以使用回调这样的

进行更正

<button id="testbutton">test</button>

        <script type="text/javascript">
            var testTime = ""

            function alertTime(inputTime) {
                inputTime = Date.now();
                alert(inputTime);
            }

            document.getElementById("testbutton").addEventListener('click', function(){ 
  alertTime(testTime);
});

        </script>

Answer 4

在JavaScript中，使用以下语法调用函数：

functionName()

使用事件处理程序时，每个事件将调用分配为事件处理程序的函数。您不想调用该函数，而是将函数 value 设置为事件处理程序，如下所示：

function alertTime(inputTime) {
    inputTime = Date.now();
    alert(inputTime);
}

element.onclick = alertTime;

这就是警报立即显示的原因：您正在调用函数，而不是将其分配给onclick事件处理程序。

您会注意到，这并没有通过testTime变量。虽然您可以绑定testTime，""的当前值，但是每次调用事件处理程序时，就像这样：

element.onclick = alertTime.bind(this, testTime)

...这很可能不是您想要的，因为即使""发生更改，事件处理程序也会始终用testTime调用。相反，请尝试直接在函数中使用testTime。

Answer 5

除非您的用例需要它，否则最好将功能的逻辑包含在其内部。

这样，当您将其设置为click事件侦听器的回调并且无需评估时，就无需将任何参数传递给alertTime函数。

以您的情况bind可以解决此问题。

document.getElementById("testbutton").onclick = alertTime.bind(testTime);

但是您可以使事情变得简单一些，而不必像这样使用bind：

const button = document.getElementById("testbutton");

const alertTime = () => {
  const time = Date.now();
  alert(time);
};

button.addEventListener('click', alertTime);

<button id="testbutton">test</button>

我还建议您阅读arrow functions，因为您提到您正在学习JS函数

为什么警报功能无法正常工作

5 个答案: