在html页面开发中，我们经常会引入多个JS脚本来实现不同的功能，但有时会出现两个JS脚本只有一个能正常运行的情况，这会影响页面的整体功能实现。出现这种问题的原因有多种，我们可以从常见的场景入手逐一排查解决。
常见导致双JS只运行一个的原因
1. 脚本加载顺序问题
如果第二个JS脚本依赖第一个JS脚本中定义的变量或函数，但是第一个脚本还没加载完成就执行第二个脚本，就会导致第二个脚本运行失败。另外如果脚本放在<head>标签中，没有设置延迟加载，可能会在DOM还没解析完成时就执行，导致部分逻辑无法生效。
2. 全局变量或函数冲突
两个JS脚本如果定义了同名的全局变量或者函数，后加载的脚本会覆盖先加载的脚本的内容，就会导致先加载的脚本功能失效，看起来就像只运行了后面的脚本。
3. 脚本内部存在语法错误
如果其中一个JS脚本存在语法错误，浏览器解析到错误时会停止后续该脚本的执行，同时可能会影响后续同类型脚本的加载运行，导致只有另一个无错误的脚本正常执行。
4. 执行环境限制
比如部分脚本需要在特定的DOM节点加载完成后才能运行，或者存在作用域限制，导致其中一个脚本的执行逻辑无法触发。
让两个JS都正常运行的解决方法
调整脚本引入位置
把两个JS脚本都放在<body>标签的末尾，也就是所有DOM内容之后，这样可以保证脚本执行时DOM已经完全解析完成，避免因为DOM未加载导致的执行失败。示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>双JS运行示例</title>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<!-- 将两个JS放在body末尾 -->
<script src="first.js"></script>
<script src="second.js"></script>
</body>
</html>
处理全局命名冲突
给每个JS脚本中的全局变量和函数都加上独立的前缀，或者使用立即执行函数表达式（IIFE）把脚本内容包起来，避免全局作用域污染。比如第一个脚本可以这样写：
// 第一个JS脚本，使用IIFE隔离作用域
(function() {
// 定义脚本内的变量和函数
var first_var = "第一个脚本的变量";
function first_func() {
document.getElementById("test1").innerText = "第一个脚本执行成功";
}
// 如果需要暴露接口给外部，可以挂载到自定义全局对象上
window.firstScript = {
func: first_func
};
})();
第二个脚本同样使用独立的作用域，避免和第一个脚本的内容冲突：
// 第二个JS脚本，独立作用域
(function() {
var second_var = "第二个脚本的变量";
function second_func() {
document.getElementById("test2").innerText = "第二个脚本执行成功";
}
window.secondScript = {
func: second_func
};
})();
捕获脚本错误排查问题
可以在脚本执行时加入错误捕获，快速定位是哪一个脚本出现了问题。可以在引入脚本的标签后添加错误监听，或者在脚本内部使用try-catch包裹执行逻辑：
// 在脚本内部捕获错误
try {
// 原有脚本逻辑
var test_var = "测试变量";
console.log(test_var);
} catch (e) {
console.error("脚本执行出错：", e);
}
设置脚本加载完成后的执行逻辑
如果脚本之间有依赖关系，可以监听脚本的加载完成事件，等第一个脚本加载完成后再执行第二个脚本的内容。示例代码如下：
<script>
// 动态加载第一个脚本
var script1 = document.createElement("script");
script1.src = "first.js";
script1.onload = function() {
// 第一个脚本加载完成后加载第二个脚本
var script2 = document.createElement("script");
script2.src = "second.js";
document.body.appendChild(script2);
};
document.body.appendChild(script1);
</script>
验证方法
修改完成后，可以在浏览器的开发者工具中查看控制台输出，确认两个脚本都没有报错，同时检查两个脚本对应的功能是否正常触发。也可以在脚本中分别加入不同的日志输出，比如第一个脚本输出console.log("第一个JS运行")，第二个输出console.log("第二个JS运行")，刷新页面后如果控制台能同时看到两条日志，就说明两个JS都已经正常运行。
JavaScripthtml脚本加载代码执行顺序冲突排查修改时间：2026-06-26 06:48:40