浏览器中的Javascript，如何在1个脚本文件完全加载时调用函数，但不关心其他资源

Question

在我的 html 中，我有 2 个脚本标签：

<script src="first.js"></script> 
<script src="second.js"></script>

first.js 是一个大型库文件，可以使

funcFromFirstJs

可用。我想在它准备好时调用这个函数。有时，first.js 在执行 secondary.js 之前没有足够的时间完成加载。我目前使用这种递归策略，如下所示：

//第二个.js

function callIfReady() {
  if (typeof funcFromFirstJs === 'function') {
    funcFromFirstJs();
  } else {
    // wait for a few seconds and callIfReady() again
  }
}

有更好的方法吗？ 我知道

window event 'load' which is supposed to fire when all sources in html including images have finished loading completely

。我也知道

document event DOMContentLoaded which happens when tags are loaded, but may happen before their content completely finishes loading

。 因为

first.js

是一个库文件，所以我也不想在

first.js

底部添加我的js代码。 具体来说，我只想等待first.js完全加载，然后在

second.js

中运行这段代码。我当然

not

关心其他东西的加载进度，比如图像或其他脚本标签；这就是为什么我

not

想要使用

window event: load

。

Answer 1

如果您是我的同事，我首先会问您为什么决定使用这种方法，以及为什么您不使用任何捆绑器来有效地将所有脚本合并到一个文件中，并通过以下方式最小化其大小摇树。

但是，如果您仍然想实现问题中描述的行为，您可以使用的方法之一是：添加第二个脚本中的第一个脚本并等待“onload”事件触发。像这样：

// second.js

function callWhenReady() {
    funcFromFirstJs(); //everything you need from the first.js
}

const s = document.createElement('script'); // create script element
document.body.appendChild(s); // append it to the DOM
s.onload = callWhenReady; // execute when script loaded
s.src = 'https://...path/to/first.js'; // set path to script

通过这个稍微棘手的解决方案，您应该能够从函数 `callWhenReady' 中的

first.js

脚本执行您需要的任何内容；

附注 当然，在这种情况下，您应该从 HTML 中删除 `。

Answer 2

当你打电话时，它出现“未定义”。？