JavaScript：JavaScript何时评估函数，onload或何时调用函数？
[英]JavaScript: When does JavaScript evaluate a function, onload or when the function is called?
问题描述
When does JavaScript evaluate a function? 
JavaScript何时评估函数？ Is it on page load or when the function is called? 是在页面加载时还是在调用函数时？
The reason why I ask is because I have the following code: 我问的原因是因为我有以下代码：
function scriptLoaded() {
// one of our scripts finished loading, detect which scripts are available:
var jQuery = window.jQuery;
var maps = window.google && google.maps;
if (maps && !requiresGmaps.called) {
requiresGmaps.called = true;
requiresGmaps();
}
if (jQuery && !requiresJQuery.called) {
requiresJQuery.called = true;
requiresJQuery();
}
if (maps && jQuery && !requiresBothJQueryGmaps.called) {
requiresBothJQueryGmaps.called = true;
requiresBothJQueryGmaps();
}
}
// asynch download of script
function addScript(url) {
var script = document.createElement('script');
script.src = url;
// older IE...
script.onreadystatechange=function () {
if (this.readyState == 'complete') scriptLoaded.call(this);
}
script.onload=scriptLoaded;
document.getElementsByTagName('head')[0].appendChild(script);
}
addScript('http://google.com/gmaps.js');
addScript('http://jquery.com/jquery.js');
// define some function dependecies
function requiresJQuery() { // create JQuery objects }
function requiresGmaps() { // create Google Maps object, etc }
function requiresBothJQueryGmaps() { ... }
What I want to do is perform asynchronous download of my JavaScript and start at the earliest possible time to begin executing those scripts but my code has dependencies on when the scripted have been obviously downloaded and loaded. 我想做的是对JavaScript进行异步下载，并尽早开始执行这些脚本，但是我的代码依赖于脚本的下载时间和加载时间。
When I try the code above, it appears that my browser is still attempting to evaluate code within my require* functions even before those functions have been called. 当我尝试上面的代码时，似乎我的浏览器仍在尝试在我的require*函数中评估代码，即使这些函数尚未被调用。 Is this correct? 这个对吗？ Or am I misunderstanding what's wrong with my code? 还是我误解了我的代码有什么问题？
2 个解决方案
解决方案1
5 2010-05-11 16:24:15
Functions are evaluated when called. 函数在调用时进行评估。
For example 例如
function test() {
window.foo = 'bar';
}
console.log(window.foo); // => undefined
test();
console.log(window.foo); // => bar
Even though test was created before the first console.log , window.foo is not populated until test is actually called. 即使test是在第一个console.log之前创建的，在实际调用test之前，不会填充window.foo 。
If your requires* functions are hanging/blocking, then you need to show the code for those (why would you not provide the source for the problematic ones?) 如果您的requires*功能正在挂起/阻塞，那么您需要显示这些功能的代码（为什么不提供有问题功能的源代码？）
Edit : 编辑 ：
Currently, your site is blanking out on me when you attach the loaded <script> to the <head> . 当前，当您将加载的<script>附加到<head>时，您的网站对我无能为力。
Anyway, a quick fix would be to place the scripts you wants near the bottom of the page, before </body> , because only scripts in <head> will fully block the page while loading. 无论如何，一种快速的解决方法是将所需的脚本放在</body>之前的页面底部附近，因为只有<head>脚本在加载时会完全阻塞页面。
There are some elegant ways to late-load resources, but, to keep it simple .. 有一些优雅的方法可以延迟加载资源，但是要保持简单..
<script type="text/javascript" src="http://path/to/jquery.js"></script>
<script type="text/javascript">
requiresJQuery(); // jQuery is available at this point
</script>
</body>
The point is that, since the <script> is placed AFTER your main elements, the DOM elements will be available (and potentially loaded) before the browser starts to download your other libraries. 关键是，由于<script>放在主要元素之后，因此DOM元素将在浏览器开始下载其他库之前可用（并且可能已加载）。
解决方案2
0 2010-05-11 16:26:44
Yes, you are probably misunderstanding. 是的，您可能会误会。 Even if your functions contain a syntax error, it should not matter until you actually call the function. 即使您的函数包含语法错误，也没关系，直到您实际调用该函数。
Could it be that you're calling those functions from somewhere else? 可能是您从其他地方调用了这些函数吗？ Maybe you didn't provide accurate code samples? 也许您没有提供准确的代码示例？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.