需要在同一HTML頁面調用的兩個不同JS文件中的兩個$（document）.ready函數之間確定優先級

Question

我有一個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（）在requestUserStoreList（）之前執行，所以它獲得storeID的空值。

我的問題是如何確保在$（document）.ready上的requestDashLaborCost（）之前執行requestUserStoreList（） ？

謝謝。

Answer 1

這是我們可能如何使用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/