通过回调强制同步函数执行

Question

我有一个有机会在之前操作我的页面的DOM 它的样式，呈现和显示给用户。 显然，我很乐意做这个窗口中所有动态的有趣东西，因为在渲染页面之后DOM操作非常昂贵。由于这主要针对移动设备，因此这种优化对我来说很有价值。

这里有一个基本概述/时间表：

function CalledBeforePageRendered(){ 
    DoAsyncDataBaseWorkWithCallBack(AsyncDataBaseCallBack); 
    DoLocalizationsAndOtherSYNCRONOUSActions(); 
} 


function AsyncDataBaseCallBack(results){ 
    // code that processes the results element 
    // code that manipulates the DOM *before* it's styled. 
} 

的问题是，DoAsyncDataBaseWorkWithCallBack和DoLocalizationsAndOtherSYNCRONOUSActions 迅速完成，然后CalledBeforePageRendered收益和后续的造型被应用。

应用样式后，该页面会显示给用户...然后AsyncDataBaseCallBack被称为 ，然后应用div标签和其他DOM修改。只有，我需要这些修改发生在程式化之前发生

有没有什么办法可以使'CalledBeforePageRendered'等待'AsyncDataBaseCallBack'在返回前完成？我知道闭包通常在这里工作，但我不知道如何使用在CalledBeforePageRendered函数之外定义的回调来完成闭包工作。

Answer 1

如果您尝试执行同步JavaScript XmlHttpRequest（XHR）调用 - 这是非常可能的，但假设您尝试在呈现页面之前在客户端上操作DOM - 为什么不在服务器端（因为它首先生成了HTML）。如果你不能，我强烈建议你不要执行同步JavaScript XHR来在页面呈现之前更新页面。这样做会在XHR运行时锁定浏览器窗口，这不仅会增加页面加载的显着延迟时间 - 还会阻止最终用户（因为他们体验到的似乎是一个硬锁）。在DOM渲染之前操纵DOM并不是，即昂贵。最好是首先返回你想要的HTML，而不是在页面加载后加载更多。

再次 - 我只想强调 - 尝试在服务器端（而不是客户端）完成这项工作。如果你不能，并且需要将它作为次要调用 - 添加一个加载镜像，让XHR像大多数JavaScript库那样异步运行，无论如何都是非常强大的。如果我误解了你的目标，请告诉我。