函数在 Javascript 中无需 setTimeout() 即可立即运行答案

【问题标题】：Function runs immediately without setTimeout() in Javascript函数在 Javascript 中无需 setTimeout() 即可立即运行
【发布时间】：2021-08-17 22:22:39
【问题描述】：

我想用 HTML、CSS、Javascript、PHP 和 MySQL 构建一个网站。我希望我的网站有一个功能，客户想从网上下载文件，如果他们不想下载更快，不需要通过缩短链接，他们将输入代码，网站将使用 PHP 和MySQL 检查代码是否在数据库中。如果代码有效，他们将按下一步按钮去下载文件。这是我所有的代码：

HTML + CSS + JS + PHP：

<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function countWord() {
var x = document.getElementById("code").value;
if ((x.length)!=12) {
document.getElementById("ok").disabled = true;
} else if ((x.length)==12) {
document.getElementById("ok").disabled = false;
}
}
</script>
<style>
* {
padding:0;
margin:0;
box-sizing:border-box;
}
body {
background-color:#fff;
}
#code {
width:98%;
margin-left:1%;
}
#ok {
width:50%;
margin-left:25%;
margin-top:10px;
}
#nextbtn {
width:50%;
margin-left:25%;
margin-top:10px;
}
</style>
</head>
<body>
<form method="POST" name="code_form" id="code_form">
<input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
<input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
</form>
<button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>

<?php
$conn = mysqli_connect("","","","");
if (isset($_POST["ok"])) {
$code = $_POST["code"];
$sql = "SELECT * FROM code WHERE code='$code'";
$result = mysqli_query($conn,$sql);
if (mysqli_num_rows($result) == 1) {
echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";
} else {
echo "<script>alert('Error');</script>";
}
}
?>

</body>
</html>

在下面的代码中，我希望能够在不使用 setTimeout() 函数的情况下立即运行该函数：

echo "
<script>
var x = setTimeout(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
};
},0);
</script>
";

请帮帮我！

【问题讨论】：

标签： javascript php html css mysql

【解决方案1】：

这个函数会被立即调用。 IIFE

(function(){
document.getElementById('nextbtn').disabled = false;
document.getElementById('nextbtn').onclick = function() {
window.open('https://www.youtube.com');
})()

【讨论】：

【解决方案2】：

仅删除setTimeout 还不够吗？

<script>
 (function(){
   document.getElementById('nextbtn').disabled = false;
   document.getElementById('nextbtn').onclick = function() {
   window.open('https://www.youtube.com');
 })();
</script>

【讨论】：

【解决方案3】：

<script>
   document.getElementById('nextbtn').disabled = false;
   document.getElementById('nextbtn').onclick = function() {
      window.open('https://www.youtube.com');
   };
</script>

//---

<html>
<head>
    <title>HTML Document</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        function countWord() {
            var x = document.getElementById("code").value;
            if ((x.length) != 12) {
                document.getElementById("ok").disabled = true;
            } else if ((x.length) == 12) {
                document.getElementById("ok").disabled = false;
            }
        }
    </script>
    <style>
        * {
            padding:0;
            margin:0;
            box-sizing:border-box;
        }
        body {
            background-color:#fff;
        }
        #code {
            width:98%;
            margin-left:1%;
        }
        #ok {
            width:50%;
            margin-left:25%;
            margin-top:10px;
        }
        #nextbtn {
            width:50%;
            margin-left:25%;
            margin-top:10px;
        }
    </style>
</head>
<body>
    <form method="POST" name="code_form" id="code_form">
        <input type="text" class="form-control" name="code" id="code" onkeyup="countWord();">
        <input type="submit" name="ok" id="ok" class="btn btn-primary" disabled>
    </form>
    <button type="button" disabled class="btn btn-primary" id="nextbtn">Next</button>

    <?php
    //$conn = mysqli_connect("", "", "", "");
    if (isset($_POST["ok"])) {
        $code = $_POST["code"];
        //$sql = "SELECT * FROM code WHERE code='$code'";
        //$result = mysqli_query($conn, $sql);
        //if (mysqli_num_rows($result) == 1) {
        if (1 == 1) {
            echo "<script>
        document.getElementById('nextbtn').disabled = false;
        document.getElementById('nextbtn').onclick = function() {
            window.open('https://www.youtube.com');
        };
    </script>";
        } else {
            echo "<script>alert('Error');</script>";
        }
    }
    ?>
</body>

【讨论】：