Javascript 函数即使没有被调用也会被执行

Question

您好，我对 javascript 还很陌生，现在我正在尝试定义函数和隐藏/显示特定元素。

在我制作的这个简单程序中，我试图在函数仍在执行时显示加载屏幕。问题是，即使不点击按钮，onlick 事件处理程序中的函数也会执行

<body>
<button id="thisbutton" type="button">clickme</button>
<div>
    <p> The download will begin in <span id="countdowntimer">10 </span> Seconds</p>
</div>
<div id="loadss" class="LockOn"></div>

<script>

    document.getElementById("thisbutton").onclick(meow());
    document.onload = rawr();
        function rawr() {
        document.getElementById("loadss").style.visibility = "hidden";
        document.getElementById("loadss").style.display = "none";
        }

        function meow() {
            document.getElementById("loadss").style.visibility = "visible";
            document.getElementById("loadss").style.display = "block";
            time();
            document.getElementById("loadss").style.visibility = "hidden";
            document.getElementById("loadss").style.display = "none";
        };
        function time() {
            var timeleft = 10;
            var downloadTimer = setInterval(function () {
                timeleft--;
                document.getElementById("countdowntimer").textContent = timeleft;
                if (timeleft <= 0)
                    clearInterval(downloadTimer);
            }, 1000);
        }
</script>

Answer 1

在 Javascript 中，函数是 first-class citizens。这意味着您可以像对待大多数变量一样对待它们：

function test () { console.log('Hi!'); }

var x = test;

您可以通过在对它们的任何引用上使用括号来执行它们：

test(); // will execute function test
x(); // will _also_ execute function test

因此，您的代码：

document.getElementById("thisbutton").onclick(meow());
document.onload = rawr();

正在执行函数meow 和rawr。您可能希望将引用传递到这些函数：

document.getElementById("thisbutton").onclick(meow);
document.onload = rawr;

Answer 2

你的代码

document.getElementById("thisbutton").onclick(meow());

应该像下面这样

document.getElementById("thisbutton").onclick = meow;

注意我没有调用meow 函数并且onclick 不是一个函数而是一个属性。

还有你的代码

document.onload = rawr;

应该是

document.onload = rawr;

当你使用括号时，函数就会被调用。