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;

使用括号时，该函数将被调用。

即使未调用Javascript函数也要执行

2 个答案: