Question

JavaScript何时评估函数？它是在页面加载时还是在调用函数时？

我问的原因是因为我有以下代码：

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() { ... }

我想要做的是执行我的JavaScript的异步下载，并尽可能早地开始执行这些脚本，但我的代码依赖于脚本明显下载和加载的时间。

当我尝试上面的代码时，我的浏览器似乎仍在尝试评估require*函数中的代码，甚至在调用这些函数之前。它是否正确？或者我误解了我的代码有什么问题？

Answer 1

调用函数时进行评估。

例如

function test() {
    window.foo = 'bar';
}

console.log(window.foo); // => undefined
test();
console.log(window.foo); // => bar

即使在第一个test之前创建了console.log，但在实际调用window.foo之前，test仍未填充。{/ p>

如果您的requires*函数挂起/阻止，那么您需要显示这些函数的代码（为什么不提供有问题的代码？）

修改：

目前，当您将加载的<script>附加到<head>时，您的网站会向我隐瞒。

无论如何，快速解决方法是在</body>之前将您想要的脚本放在页面底部附近，因为<head>中的脚本只会在加载时完全阻止页面。

有一些优雅的方法来延迟加载资源，但是，为了保持简单..

<script type="text/javascript" src="http://path/to/jquery.js"></script> <script type="text/javascript"> requiresJQuery(); // jQuery is available at this point </script> </body>

关键在于，由于<script>位于主要元素之后，因此在浏览器开始下载其他库之前，DOM元素将可用（并可能已加载）。

Answer 2

是的，你可能误会了。即使你的函数包含语法错误，在实际调用函数之前也无关紧要。

你是否可以从其他地方调用这些功能？也许您没有提供准确的代码示例？

JavaScript：JavaScript何时评估函数，onload或何时调用函数？

2 个答案: