异步JavaScript准备功能

Question

为了加速我的应用程序，我想在DOM准备好之前准备好一些数据，然后在准备好DOM时使用这些数据。

下面是它可能是：

var data = function prepareData(){ 
    ... 
}(); 

$(document).ready(function() { 

    // use data to build page 

} 

如何准备数据以供日后使用？ 感谢

Answer 1

您需要应该使用括号周围的函数表达式为清楚（因为在你定义和调用功能，但没有使用的返回值类似的情况，这将是一个语法错误没有他们）。另外，当你使用函数表达式时，你不想给它一个名字。所以：

var data = (function(){ 
    ... 
})(); 

，或者使用功能声明代替：

var data = processData(); 
function processData() { 
    ... 
} 

（为什么不与函数表达式中使用的名字，因为在不同的实现中的错误，特别是互联网浏览器之前，IE9，其中will create two完全不相关的功能。）

但是，我不清楚你想要达到什么目的。当浏览器到达script元素时，它将切换到JavaScript解释器并等待它完成，然后继续构建DOM（因为您的脚本可能使用document.write添加到HTML标记流）。您可以使用async or defer attributes答应你不打算使用document.write浏览器，在支持它们的浏览器，但...

---

更新：下面你说过：

，因为prepareData是长时间的函数，我认为浏览器在构建DOM树时可以执行此操作。不幸的是'$（document）.ready'在prepareData完成之前触发。现在的问题是如何教“$（文件）。就绪”等待就绪数据

的唯一途径，而processData运行是ready处理程序可以触发可能，如果processData是使用异步AJAX（或一对夫妇边缘条件约alert,confirm，等等，但我认为你没有这样做）。如果是这样，你不能将结果作为函数的返回值返回（尽管你可以返回一个继续作为ajax回调结果更新的对象）。否则，这是不可能的：浏览器上的JavaScript是单线程的，ready处理程序将排队等待解释程序完成其以前的任务（processData）。

如果processData没有做任何事情异步，我怀疑什么症状是你看到让你觉得ready处理程序期间processData发射都有不同的原因。

但在异步的东西，三个选项的情况下：

1. 如果你要撑起准备处理程序的控制不是，你可能看jQuery的holdReady功能。请致电$.holdReady(true);阻止活动，并使用$.holdReady(false);停止举办活动。

2. 这很简单，重新安排ready处理程序。以下是我想做到这一点（请注意，我在一个范围功能包一切，所以这些东西都不是全局）：

   (function() { 
       var data = processData(); 
   
       $(onPageReady); 
   
       function processData() { 
       } 
   
       function onPageReady() { 
        if (!data.ready) { 
         // Wait for it to be ready 
         setTimeout(onPageReady, 0); // 0 = As soon as possible, you may want a 
                // longer delay depending on what `processData` 
                // is waiting for 
         return; 
        } 
       } 
   
   })(); 
   

   注意，我高兴地在onPageReady功能使用data，因为我知道它在那里;该功能将不会运行，直到processData已返回。但我假设processData正在返回一个缓慢通过ajax调用填充的对象，所以我在对象上使用了一个ready标志，当所有数据准备就绪时，该标志将被设置。

3. 如果您可以更改processData，还有更好的解决方案：当processData完成后触发ready处理程序。下面是当processData与它所需要做的做了代码：

   $(onPageReady); 
   

   这工作，因为如果DOM还没有准备好，只是时间表的呼吁。如果DOM已经准备好，jQuery将立即调用你的函数。这可以防止上面的混乱循环。