时间戳

首页 > 解决方案 > 需要在同一个 HTML 页面调用的两个不同 JS 文件中的两个 $(document).ready 函数之间进行优先级排序

javascript - 需要在同一个 HTML 页面调用的两个不同 JS 文件中的两个 $(document).ready 函数之间进行优先级排序

问题描述

我有一个 HTML 页面，其中包含 2 个 JavaScript 文件（以相同的顺序）

<script src="../js/common_js/selectStore.js"></script>
<script src="../js/common_js/dashboard.js"></script>

注意：selectStore.js是整个 Web 应用程序中的通用 JS 文件，dashboard.js特定于相关的 HTML 页面。

这两个脚本文件都有 $(document).ready 如下

在selectStore.js里面：

$(document).ready(function() {
    requestUserStoreList();
});

在dashboard.js内部：

$(document).ready(function() {
    requestDashLaborCost();
});

requestUserStoreList()获取存储列表，将其传递给另一个函数，然后将当前storeID存储在会话存储中。

requestDashLaborCost()从会话存储中获取当前storeID以运行“POST”API。

目前requestDashLaborCost()获取 storeID的 null 值，因为它在requestUserStoreList()之前执行。

我的问题是如何确保requestUserStoreList( )在 $(document).ready 上的requestDashLaborCost() 之前执行？

谢谢你。

标签： javascriptjquery

解决方案

这是我们可以CustomEvent用来触发第二个脚本文件中的代码的方法。

注意：因为我们只需要做工作，所以不需要通过detail.

显然片段不支持两个文件。但你明白了。

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() {
  myDataValue = 10;
}

document.addEventListener('DOMContentLoaded', () => {
  doWorkNumberOne();
  document.dispatchEvent(new CustomEvent('MyCustomEvent'));
});

// This is in file two
function doWorkNumberTwo() {
  console.log(myDataValue);
}

document.addEventListener('MyCustomEvent', () => {
  doWorkNumberTwo();
});

如果我们在第一种方法中做一些async工作：

let myDataValue = 0;

// This is in file one.
function doWorkNumberOne() {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      myDataValue = 10;
      resolve();
    }, 1500);
  });
}

document.addEventListener('DOMContentLoaded', () => {
  console.log('this takes 1.5secs');
  // This is Async so we need to raise when done.
  doWorkNumberOne().then(() => {
    document.dispatchEvent(new CustomEvent('MyCustomEvent'));
  });
});

// This is in file two
function doWorkNumberTwo() {
  console.log(myDataValue);
}

document.addEventListener('MyCustomEvent', () => {
  doWorkNumberTwo();
});

有关文档，CustomEvent请参阅：

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

这里是 jQuery 中 CustomEvents 的文档：

https://learn.jquery.com/events/introduction-to-custom-events/

推荐阅读