Question

我认为它必须是一个简单的问题，但我一直在寻找并且没有找到答案。

我认为我有一个带有一些脚本（在正文中）的html页面，就像这样：

<script type="text/javascript">grf();</script>

grf（）函数在外部.js文件中定义。问题是：一旦浏览器加载了页面及其所有外部js文件，是否执行此功能？或者可能是在加载.js文件之前执行该函数的情况？如果是这样，我该如何防止这种情况？

Answer 1

遇到此功能时会运行该功能。如果要在页面加载后运行它，标准方法是挂钩窗口的onload事件。 jQuery对此有很大的支持，但让我们从地面开始：

<script type="text/javascript">window.onload = function() { grf(); }</script>

这将踩踏任何其他onload处理程序，而不是之前在页面上分配的，这就是为什么大多数人使用jQuery小心链接到以前的处理程序：

<script type="text/javascript">$(document).ready(function() { grf(); });</script>

当然对于第二个例子，你需要在页面的更上方包含jQuery库（听起来你无法做到这一点）。

Answer 2

查看是否定义了一个函数：

// functions are defined or undefined just like regular variables
function myFunc() {
   /*--code here--*/
}

// So we just need to see if it's defined
if( myFunc ) {
   /*--do something here--*/
} else {
   /*--wait, retry or w/e--*/
}

当找到外部脚本时，不会再读取（x）html，直到读取外部脚本（如果有任何可执行代码，则执行内部代码）。

因此，在“包含”外部文件之后调用外部文件中的函数不能生成函数未定义的错误。（但是，请记住，如果外部函数试图操纵DOM或页面中仍然“不存在”的元素，您将收到错误。）

Answer 3

该方法将在浏览器加载页面时执行，当它到达<script>块的末尾时。如果外部JS文件包含在页面中，而不是调用此方法的位置，则会抛出错误（方法未定义）。

如果您想等到页面和资产已加载，最好使用库。使用建议的内置onload事件是有限的，因为它只支持添加一个处理程序（添加另一个将覆盖前一个处理程序）。以下是使用jQuery的示例：

<script type="text/javascript">
$(document).ready(function() {
   //code goes here
   });
</script>

Answer 4

只要脚本文件包含在函数用法之上，该函数就可用。浏览器在遇到

时将暂停渲染

<script src="..."></script>

标签。它只会在下载和解析脚本时继续处理文档页面。因此，脚本中定义的任何函数都将在以下时间可用：

<script src="..."></script> <!-- Browser waits until this script is loaded -->
<script>
   foo(); // if function foo was in the script above, it is ALWAYS available now
</script>

这实际上并不总是理想的行为 - 有时您不想等待脚本下载，因为它可能会使您的代码看起来很慢。一种技术是在</body>之前加载并执行页面底部的所有脚本，此时所有HTML都已呈现。

Answer 5

浏览器在看到标记时执行它。不仅可能尚未加载其他脚本，也可能无法构造DOM。但是，可以保证脚本按照它们出现在HTML中的顺序执行。

如果你可以使用jQuery，它有$ .ready（）函数，当DOM准备就绪时调用回调，因此每个脚本都已加载。像

一样使用它

$.ready(grf);

或使用常用的匿名函数。

Answer 6

防止脚本问题的最佳方法是使用jQuery，Mootools等JavaScript库，这样可以轻松地将任何代码绑定到各种事件（dom.ready等），以确保事先完全加载所有内容。

什么时候执行javascript函数

6 个答案: