Javascript-异步加载代码时window.onload的替代方案

我有一个计算器，我正在集成到我的网站。通常，当单独在页面上时，计算器使用以下函数初始化

window.onload = function () {

/* Initializes calculator */

}

但是，当用户请求时，我将这个计算器异步加载到页面上，默认情况下它不在页面上。当计算器异步加载到页面上时，如何初始化它？我遇到的问题是，当我异步将计算器加载到页面时，初始化计算器的

window.onload=function（）

不起作用，因为

window.onload

事件已经发生。当计算器异步进入页面时，我应该使用什么函数来初始化计算器，而不是使用

window.onload

// 1. Page loads
// 2. Calculator is brought to page asynchronously 
// 3. Code below executes to initialize the calculator

***something else*** = function () {

/* Initializes calculator */

}

---

从以下位置更改分配给

onload

的匿名函数

window.onload = function() {
    // stuff
};

…直接或间接调用的命名函数，如下所示：

function initCalculator() {
    // stuff
}

if( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', initCalculator );
}
else if( document.readyState === 'interactive' || document.readyState === 'complete' ) {
    initCalculator ();
}

---

• 如果
  是正常（静态）HTML的
  的一部分，并同步加载或使用

  延迟
  ，则
  initCalculator
  函数将在触发
  'DOMContentLoaded'
  时运行

• 如果
  是带有

  async

  -的正常（静态）HTML
  的一部分，或者
  是在加载页面后添加的，那么如果在

  DOMContentLoaded

  之后加载异步脚本，则

  initCalculator

  函数将立即运行，或者，如果它在

  DOMContentLoaded

  之前加载，那么它将根据需要运行

---

为了更加安全，您可以通过在

上使用

数据集
条目来防止双重初始化（这比在
窗口中添加属性更安全）：

你如何装入计算器？当然会有一个对该加载的回调。这取决于您将计算器“异步地”带到页面的方法。我正在使用一个对PHP文件的ajax调用，该文件为计算器加载HTML/CSS/JS
取而代之。您可能过于关注
最小值
，而对
可再现性方面的关注不够；）
function initCalculator() {
    if( document.documentElement.dataset['calcLoaded'] === 'true' ) return;
    
    // do stuff

    document.documentElement.dataset['calcLoaded'] = 'true';
}

if( document.readyState === 'loading' ) {
    document.addEventListener( 'DOMContentLoaded', initCalculator );
}
else if( document.readyState === 'interactive' || document.readyState === 'complete' ) {
    initCalculator ();
}