在页面加载中运行函数 javascript 的最佳方式答案

【问题标题】：The best way to run a function javascript in page load在页面加载中运行函数 javascript 的最佳方式
【发布时间】：2017-10-21 01:21:30
【问题描述】：

请不要重复我：$(document).ready equivalent without jQuery

我的问题有一点不同。我将对此进行解释。我已经把我所有的功能都放在了这样的就绪功能上。

$(document).ready(function () {
 $("#liLanguage").find("a").click(function () {
            ChangLanguage(this);
        });
// orther a lot of function here
   LoadDataToGrid();
}

做得很好但是，昨天我的PM说：“你不需要把你的代码放在ready函数里，你可以不用ready函数运行，把ready函数放进去是很疯狂和愚蠢的。”

我已经阅读了有关 ready 函数和 window.onload() 函数的更多主题。但是没有地方说我们不能在就绪函数中运行函数。当我将所有函数都放入就绪函数时，我的代码有什么问题？

这样更好

$(document).ready(function () {
 $("#liLanguage").find("a").click(function () {
            ChangLanguage(this);
        });
}

或者这样更好（没有准备好的功能）

$("#liLanguage").find("a").click(function () {
            ChangLanguage(this);
        });

【问题讨论】：

“疯狂”和“愚蠢”都不是有效的批评。如果一段代码确实存在问题，评论家应该能够解释使用它所带来的困难。
谢谢，顺便说一句。你能告诉我在没有就绪功能的情况下更好地运行还是更好地在就绪功能中运行？我看到一切都很好
如果显示的代码包含在 #liLanguage 元素之后的脚本元素中（例如，在正文的末尾），那么两个版本都可以工作。如果显示的代码包含在脚本元素之前 #liLanguage 元素中，那么只有带有准备好的处理程序的代码才能工作。

标签： javascript jquery html css

【解决方案1】：

通常，PM 没有工程背景，他们喜欢像他们一样说话。试着注意这一点。

现在回答您的问题，您可以简单地将脚本添加到 HTML 的底部而不是头部。这样，您的脚本将在 DOM 准备就绪后加载，这基本上就是 document.ready 所做的。

【讨论】：

谢谢，我已经在 HTML 的底部添加了我的脚本，你的意思是我的代码没有错吗？
您的代码没有问题。看看这个其他答案：stackoverflow.com/questions/6026645/…

【解决方案2】：

我认为，您放入 ready 函数会更好，因为它与您放置代码的位置无关。例如：

示例 1：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
   $(document).ready(function () {
        Test();
    });
    function Test() {
       $("#test").click(function (){
            console.log(2);
       })
    }
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>

但是如果你这样放代码它不会运行。

示例 2：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    Test();
    function Test() {
       $("#test").click(function (){
            console.log(2);
       })
    }
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>

如果你把你的脚本放在 html 之后，它会运行正常。

示例 3：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    Test();
    function Test() {
       $("#test").click(function (){
            console.log(2);
       })
    }
    </script>

意思是：通过示例 1，您可以将 javascript 放在任何地方，您无需关心它。

【讨论】：