JavaScript中如何让一个导入函数在另一个执行完成后再运行？

方案一：利用Promise精准控制异步执行顺序 #

核心思路是让items.js的函数返回Promise，这样就能在异步操作完成后再触发navigation逻辑，完全贴合实际加载时长，不会出现延迟或提前执行的问题。

修改items.js，让它返回整个fetch的Promise链：

export default function () {
    // 返回Promise，让外部可以监听异步完成事件
    return fetch('files/items.json').then(function(response) {
        return response.json();
    }).then(function(data) {
        let body = '';
    
        data.map(function(item) {
            body += `<a href="#" class="link">${item.name}</a>`;
        });

        let div = document.getElementById('items');
        div.innerHTML = body;
    });
}

然后修改main.js，用async/await或者链式then来控制执行顺序：

import items from './_items.js';
import navigation from './_navigation.js';

// 方式1：async/await写法（更直观）
async function init() {
    await items(); // 等待元素渲染完成
    navigation();
}
init();

// 方式2：链式then写法
// items().then(() => {
//     navigation();
// });

方案二：事件委托（适配动态元素的最优解） #

如果页面后续还会动态新增.link元素，事件委托会是更省心的方案——不用等元素加载完成，直接把事件绑定到父容器上，利用事件冒泡机制处理子元素的点击。

不需要修改items.js，直接调整navigation.js：

export default function () {
    // 绑定事件到父容器#items
    const container = document.getElementById('items');
    container.addEventListener('click', event => {
        // 只处理目标是.link的点击事件
        if (event.target.classList.contains('link')) {
            event.preventDefault();
            console.log('Click!');
        }
    });
}

此时main.js可以直接顺序调用，无需等待：

import items from './_items.js';
import navigation from './_navigation.js';

items();
navigation(); // 事件委托不依赖元素是否已存在，直接执行即可

内容的提问来源于stack exchange，提问作者Diego Vieira