何时执行javascript函数

要查看是否定义了函数:

// 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将不会被进一步读取,直到读取外部脚本(如果其中有任何可执行代码,则在内部执行代码)。

因此,在外部文件“included”之后调用外部文件中的函数不能生成未定义的函数错误。(不过,请记住,如果外部函数试图操作页面中仍然“不存在”的DOM或元素,则会出现错误。)

函数在遇到时运行。如果您希望它在页面加载后运行,标准方法是钩住窗口的onload事件。jquery对此有很好的支持,但让我们从底层开始:

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

这将在任何其他的onload处理程序上叠加,而不是以前在页面上分配的,这就是大多数人使用的原因。 jQuery 要小心链接到以前的处理程序:

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

当然,对于第二个示例,您需要将jquery库包含在页面的更上一层(听起来您不需要这样做)。

当浏览器加载页面时,当该方法到达页面末尾时,将执行该方法。 <script> 块。如果外部JS文件包含在页面中的位置比调用此方法的位置更远,那么它将抛出一个错误(未定义方法)。

如果您想等到页面和资产被加载,最好使用库。使用内置 onload 建议的事件是有限的,因为它只支持添加一个处理程序(添加另一个将覆盖上一个处理程序)。下面是一个使用 jQuery :

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

只要脚本文件包含在函数用法的上方,函数就可用。当浏览器遇到

<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都已呈现时。

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

如果您可以使用jquery,它有$.ready()函数,当dom准备就绪时调用回调,因此每个脚本都已加载。像它一样使用它

$.ready(grf);

或者使用匿名函数。

防止脚本出现问题的最佳方法是使用一个JavaScript库,如jQuery、mooolts等,这样可以很容易地将任何代码绑定到各种事件(dom.ready等),以确保所有内容都预先完全加载。