如何确保延迟脚本不会阻塞其他脚本（或异步按顺序执行）？

Question

我有一个 Web 应用程序，它提供 Jira 提供的反馈表。 Jira 提供了一个 javascript 的 sn-p 来添加，以便生成带有反馈表单的弹出窗口。

我遇到的问题是，有时 Jira 无法访问或非常慢，结果是我的应用程序因此打开非常慢。 sn-p 是这样的形式：

<script type="text/javascript" src="https://url.to.jira/one"></script>
<script type="text/javascript" src="https://url.to.jira/two"></script>

<script type="text/javascript">
window.ATL_JQ_PAGE_PROPS = {
   "triggerFunction": function(showCollectorDialog) {
      ...
   }
}
</script>

现在，我的第一个想法是添加“延迟”，但我自己的页面有自己的一堆 javascript 来执行。使用“延迟”，我的 javascript 必须等到 Jira 加载完成，让我的页面完全呈现，但我的 javascript 没有执行。

使用“异步”，即使 Jira 代码加载缓慢，我的 javascript 也会加载并正确显示页面，但 Jira 脚本的顺序现在是随机的。这两个脚本应该是按顺序加载和运行的。

如何确保 Jira 脚本不会阻塞我的页面，同时保证 Jira 反馈功能可靠可用？

Answer 1

为第一个脚本赋予async 属性，注意它的load 事件，当发生这种情况时，手动注入第二个Jira 脚本，这样Jira 会按顺序加载，同时让您自己的代码在它运行后立即运行无需等待 Jira 即可。

<script async src="https://url.to.jira/one"></script>
<script>
const firstJiraTag = document.currentScript.previousElementSibling;
firstJiraTag.addEventListener('load', () => {
  document.body.appendChild(document.createElement('script')).src = "https://url.to.jira/two";
  // once the above script fires its `load` event, both are loaded
});
// add an `error` listener to firstJiraTag if you want

// put your custom script here
// it will run as soon as this script tag runs,
// without waiting for the Jira above
window.ATL_JQ_PAGE_PROPS = {
   "triggerFunction": function(showCollectorDialog) {
      ...
   }
}
</script>