JavaScript異步加載如何確保執行順序

在 JavaScript 中，有多種方法可以實現異步加載并確保代碼的執行順序。以下是一些建議的方法：

1. 使用 Promise 和 async/await：

Promise 是一種處理異步操作的模式，它可以幫助你組織和控制異步代碼的執行順序。你可以將異步操作封裝為返回 Promise 的函數，然后使用 then() 或 async/await 語法來順序地執行這些操作。

例如：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

async function loadScriptsInOrder() {
  try {
    await loadScript('script1.js');
    await loadScript('script2.js');
    // ...其他腳本
  } catch (error) {
    console.error('Error loading scripts:', error);
  }
}

loadScriptsInOrder();

2. 使用事件監聽器：

如果你需要等待某個資源（例如圖片、字體或其他腳本）加載完成后再執行后續操作，你可以使用事件監聽器來確保執行順序。

例如，等待一個圖片加載完成后再執行一個函數：

const img = new Image();
img.onload = function() {
  // 圖片加載完成后執行的代碼
};
img.src = 'path/to/image.jpg';

3. 使用模塊系統：

現代 JavaScript 模塊系統（如 ES6 模塊或 CommonJS 模塊）可以幫助你更好地組織和管理代碼。通過將代碼拆分為多個模塊并使用 import 和 export 語句，你可以確保依賴的模塊按預期順序加載和執行。

例如，使用 ES6 模塊：

// script1.js export function loadScript1() { // … }

// script2.js import { loadScript1 } from ‘./script1.js’;

loadScript1(); // …其他代碼

總之，確保 JavaScript 異步加載代碼的執行順序需要你對異步編程模式有一定的了解。使用 Promise、async/await、事件監聽器和模塊系統等方法可以幫助你更好地組織和控制異步代碼的執行順序。