替换HTML后内联JavaScript重复调用问题：Mapbox+jQuery场景

首先，先明确你的场景：你用以下Mapbox代码在#map容器中渲染地图：

<script>
mapboxgl.accessToken = 'token';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
  center: [-74.50, 40], // starting position [lng, lat]
  zoom: 9 // starting zoom
});
</script>

同时你通过jQuery做页面内容的模式匹配替换，但替换后出现了这段内联JS重复执行的问题——这通常是因为jQuery的html()等替换操作会将新的HTML插入DOM，其中包含的<script>标签会被浏览器再次解析执行，导致地图被多次初始化。

下面给你几个实用的解决思路：

1. 从根源避免重复脚本：抽离初始化代码 #

把Mapbox的初始化逻辑从被替换的HTML片段中完全抽离，放到页面加载时只执行一次的位置（比如页面底部或$(document).ready()回调里），而不是让它出现在会被重复替换的内容中。

示例：

// 页面加载完成后只执行一次初始化
$(document).ready(function() {
  mapboxgl.accessToken = 'token';
  window.mapboxMap = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-74.50, 40],
    zoom: 9
  });
});

// 你的jQuery替换代码（只替换非脚本内容）
$('#target-element').html(yourReplacedContent);

这样替换操作不会触碰到地图初始化脚本，自然不会重复执行。

2. 给初始化加执行守卫（Guard Clause） #

如果无法避免脚本出现在被替换的内容中，可以给初始化逻辑加一个“是否已执行”的判断，确保即使脚本被重复插入，也只会执行一次：

<script>
// 用全局变量标记是否已初始化地图
if (!window.mapboxMapInstance) {
  mapboxgl.accessToken = 'token';
  window.mapboxMapInstance = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-74.50, 40],
    zoom: 9
  });
}
</script>

通过全局变量window.mapboxMapInstance的存在性判断，即使这段脚本被多次插入DOM，也只会在第一次执行时创建地图实例。

3. 封装成函数，替换后手动调用 #

把地图初始化逻辑封装成独立函数，替换HTML后手动调用一次，避免在替换内容中嵌入脚本：

// 定义全局初始化函数
function initMapbox() {
  if (!window.mapboxMapInstance) {
    mapboxgl.accessToken = 'token';
    window.mapboxMapInstance = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-74.50, 40],
      zoom: 9
    });
  }
}

// 页面加载时先执行一次（确保地图初始渲染）
$(document).ready(initMapbox);

// 你的jQuery替换操作
$('#target-element').html(yourReplacedContent);
// 替换完成后按需调用（如果需要重新初始化的话）
initMapbox();

这种方式完全掌控脚本的执行时机，不会因为HTML替换而意外触发重复执行。

4. 按需销毁旧实例（如果需要重新渲染） #

如果你的业务场景需要在替换后重新初始化地图（比如地图容器被替换，或者需要更新地图参数），可以先销毁旧的地图实例，再创建新的：

function resetMapbox() {
  // 先销毁已存在的地图实例
  if (window.mapboxMapInstance) {
    window.mapboxMapInstance.remove();
    delete window.mapboxMapInstance;
  }
  // 重新初始化
  mapboxgl.accessToken = 'token';
  window.mapboxMapInstance = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-74.50, 40],
    zoom: 9
  });
}

// 替换HTML后调用重置函数
$('#target-element').html(yourReplacedContent);
resetMapbox();

这样每次替换后都会得到一个全新的地图实例，不会有重复渲染的问题。

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