如何确保不同JS文件中的两个函数按指定顺序执行？

以下是几种不依赖脚本引入顺序、可稳定保证执行顺序的方案，可根据项目实际情况选择：

方案1：自定义事件通知（推荐，耦合度最低） #

核心逻辑是让func1执行完成后主动抛出通知，func2等待收到通知后再执行，完全不受脚本加载顺序影响。

修改file1代码： #

function func1() {
    // 原有业务逻辑
    do something
}
window.addEventListener('load', () => {
    func1();
    // 新增：执行完成后派发自定义事件
    window.dispatchEvent(new CustomEvent('func1:completed'));
    // 新增：同步打全局标记，兼容监听绑定晚于事件触发的场景
    window.func1Completed = true;
});

修改file2代码： #

function func2() {
    // 原有业务逻辑
    do something
}
// 先判断func1是否已经执行完成
if (window.func1Completed) {
    func2();
} else {
    // 未执行完成则等待事件通知
    window.addEventListener('func1:completed', () => {
        func2();
    });
}

方案2：基于全局状态的轮询检查 #

如果不想引入自定义事件，也可以通过轻量轮询实现状态判断：

修改file1代码： #

执行完func1后新增全局标记：

function func1() {
    do something
}
window.addEventListener('load', () => {
    func1();
    window.func1Executed = true;
});

修改file2代码： #

function func2() {
    do something
}
function checkAndRun() {
    // 检测到func1已执行就运行，否则50ms后再检查
    if (window.func1Executed) {
        func2();
        return
    }
    setTimeout(checkAndRun, 50)
}
window.addEventListener('load', checkAndRun)

方案3：ES模块依赖声明（项目支持ES6模块时使用） #

如果项目已经启用ES模块化规范，可以直接通过import声明依赖，浏览器会自动处理加载顺序：

修改file1为模块导出： #

export function func1() {
    do something
}

修改file2导入依赖并控制执行顺序： #

import { func1 } from './file1.js'
function func2() {
    do something
}
window.addEventListener('load', () => {
    // 明确控制先执行func1再执行func2
    func1()
    func2()
})

注意：使用该方案时需要给引入两个JS的script标签添加type="module"属性。

补充说明：你现有示例中的函数名是纯数字1、2，不符合JavaScript标识符命名规范，实际运行会报错，建议调整为func1、func2这类合法命名。

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