我来帮你搞定这个跨函数同步的问题！你的核心困扰是标记点掉落逻辑（pinDrop）和进度条更新逻辑（moveBar）分属不同函数，之前的代码因为变量同步错误和作用域冲突导致了undefined输出，咱们一步步拆解修复：

问题根源拆解 #

1. 计数变量未同步：你的pDrop变量没在pinDrop函数里更新，导致checkMarkerCount永远检测不到变化，自然不会触发进度条更新
2. 作用域冲突：moveBar里的frame函数参数counter和外部变量重名，内部无法正确获取全局的pDrop值
3. 未初始化变量：rLength没有赋值，比较时会出现undefined
4. 进度逻辑错误：直接把barW赋值为counter，没有实现每次pin掉落递增的效果

修正后的完整解决方案 #

1. 先让pinDrop正确同步计数

首先要在地图的pinDrop函数里更新全局计数变量，这样外部才能感知到标记点掉落：

// 全局变量：记录已掉落pin数量、总pin数量
let pDrop = 0;
const rLength = 50; // 替换成你的总pin数量（数组长度）

// 地图内部的pinDrop函数，每次掉落时更新计数
function pinDrop() {
  // 你的标记点掉落逻辑（比如创建DOM、添加到地图）...
  pDrop++; // 每次掉落，计数+1
  checkMarkerCount(); // 掉落完成后立即触发进度条更新
}

2. 修正检测与进度条函数

调整checkMarkerCount和moveBar的逻辑，避免作用域问题，确保进度条正确更新：

function checkMarkerCount() {
  // 直接传入当前已掉落数量给进度条函数
  moveBar(pDrop);
}

function moveBar(currentDropCount) {
  const barEl = document.getElementById("pro-bar");
  // 计算当前进度：(已掉落数/总数)*100，确保不超过100%
  const barWidth = Math.min((currentDropCount / rLength) * 100, 100);
  barEl.style.width = `${barWidth}%`;
  console.log(`当前进度：${barWidth}%`);
  
  // 进度满时的收尾操作
  if (barWidth >= 100) {
    console.log("所有标记点已掉落完成！");
  }
}

3. 可选优化：防抖避免频繁DOM更新

因为pinDrop每秒执行2次，频繁更新DOM会影响性能，加个防抖函数优化：

// 防抖函数：短时间内重复调用只执行最后一次
function debounce(func, delay = 50) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 包装检测函数为防抖版本
const debouncedCheck = debounce(checkMarkerCount);

// 然后在pinDrop里调用防抖后的函数
function pinDrop() {
  pDrop++;
  debouncedCheck();
}

为什么之前会输出undefined？ #

之前的frame函数把counter作为参数，但调用时没有传值，导致counter是undefined，进而console.log(barW)输出undefined。再加上你没在pinDrop里更新pDrop，checkMarkerCount根本不会触发moveBar，就算触发了也拿不到正确计数。

这样调整后，每次标记点掉落都会同步计数并更新进度条，完美实现跨函数的状态同步啦！

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