按顺序引入两个JS脚本，second.js偶发无法访问first.js变量是什么原因？

• 脚本为异步加载模式
  如果你给script标签加了async属性、或者两个脚本是通过JS动态创建插入到DOM中的，浏览器不会保证脚本的执行顺序。如果second.js体积更小、或者网络响应更快，会比first.js先加载执行，此时db变量还未定义就会报错。如果是添加了type="module"属性，模块内定义的变量默认是模块作用域，不会挂载到全局，即使执行顺序正确也可能访问不到。
• first.js偶发加载失败
  网络波动、服务端临时故障等原因可能导致first.js的请求出现超时、4xx/5xx错误，此时first.js没有执行，自然不会定义全局db变量。你可以在报错时查看浏览器控制台「网络」面板，确认first.js的请求状态是否正常。
• loadDbItems调用时机早于first.js执行
  你给出的代码中仅定义了loadDbItems函数，函数定义阶段不会访问db变量，只有调用时才会触发变量读取。如果你在异步回调（比如setTimeout、接口请求回调、DOM事件回调）中调用该函数，且回调触发时机碰巧早于first.js加载完成，就会出现报错。

• 检查script标签是否有async/defer/type="module"属性，动态插入的脚本可以手动设置async = false保证执行顺序
• 加全局守卫判断，调用loadDbItems前先判断db是否存在：

function loadDbItems() {
    if (typeof db === 'undefined') return console.warn('db未初始化，稍后重试')
    for(i = 0; i < db.length; i++) {
        console.log(db[i].name);
    }
}

也可以把变量挂载到明确的全局对象上：window.db = [{...}]，避免作用域问题。

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