使用回调强制执行同步功能

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之前对其进行操作并不是 代价高昂。最好首先返回您想要的HTML - 而不是在页面加载后加载更多。

再次 - 我只想强调 - 尝试在服务器端（而不是客户端）执行此工作。如果您不能并且需要将其作为辅助调用执行 - 添加加载映像并让XHR像大多数JavaScript库一样异步运行，无论如何都要强制执行。如果我误解了你的目标，请告诉我。