设置变量pDrop为2但console.log输出undefined，加载条逻辑排查

先直接拆解核心问题：控制台输出undefined是函数参数遮蔽+变量未初始化导致的，同时代码里还有逻辑触发的问题，下面逐一说明并给出修复方案：

1. 控制台输出undefined的直接原因 #

看这段关键代码：

function moveBar() {
  var barEl = document.getElementById("pro-bar");
  var barW = 1;
  var barid = setInterval(frame, 10);
  var counter = pDrop; // 外层counter变量，值为你设置的2
  function frame(counter) { // 这里的counter参数会"遮蔽"外层的counter变量
    if (counter >= rLength) { // 调用frame时没传参，counter是undefined
      clearInterval(barid);
    } else {
      barW = counter; // 这里counter是undefined，barW也变成undefined
      barEl.style.width = barW + '%'; // 最终渲染成"undefined%"
      console.log(barW) // 自然输出undefined
    }
  }
}

你给frame函数定义了counter参数，但用setInterval(frame, 10)调用时没有传递任何参数，导致这个参数值为undefined。同时这个参数会覆盖外层的var counter = pDrop变量，使得frame内部根本拿不到pDrop的实际值。

2. 未初始化rLength变量 #

代码里只声明了var rLength;但没有赋值，它的初始值是undefined。当判断counter >= rLength时，数值和undefined比较会返回false，所以永远不会进入清除定时器的分支，加载条会一直尝试更新，但因为counter是undefined，所以持续输出undefined。

3. checkMarkerCount的触发逻辑失效 #

初始状态下dropCounter = pDrop，所以if (dropCounter != pDrop)永远是false，moveBar()根本不会被调用——除非你在调用dropPin()之前修改过pDrop或者dropCounter的值，否则整个进度条逻辑完全走不通。

修复后的完整代码 #

我调整了变量命名和逻辑结构，同时修复了所有问题：

// 已投放图钉数量
var droppedPinCount = 2;
// 上一次检查时的图钉数量（用于判断是否有新投放）
var lastCheckedCount = droppedPinCount;
// 总可投放位置数量（替换成你实际的总位置数，比如从地图数据里获取）
var totalPinPositions = 10;

// 投放图钉后调用此函数（注意：先更新droppedPinCount再调用）
function dropPin() {
  // 这里先执行投放图钉的业务逻辑，然后更新数量
  // 比如：droppedPinCount += 1;
  checkMarkerCount();
}

// 检查图钉数量变化，触发进度条更新
function checkMarkerCount() {
  if (droppedPinCount !== lastCheckedCount) {
    updateProgressBar();
    // 更新检查记录，避免重复触发
    lastCheckedCount = droppedPinCount;
  }
}

// 进度条动画逻辑
function updateProgressBar() {
  var barEl = document.getElementById("pro-bar");
  if (!barEl) return; // 避免DOM元素不存在时报错

  // 计算目标进度（确保不超过100%）
  var targetProgress = Math.min((droppedPinCount / totalPinPositions) * 100, 100);
  var currentWidth = 0;
  // 定时器控制动画速度（10ms每帧）
  var progressTimer = setInterval(() => {
    if (currentWidth >= targetProgress) {
      clearInterval(progressTimer);
    } else {
      currentWidth += 1; // 可以调整步长控制动画快慢
      barEl.style.width = currentWidth + '%';
      console.log(currentWidth);
    }
  }, 10);
}

修复点说明： #

• 移除了frame函数的多余参数，解决变量遮蔽问题
• 初始化了totalPinPositions（对应原代码的rLength），需要你替换成实际的总可投放位置数
• 优化了变量命名，让逻辑更易懂
• 修复了checkMarkerCount的触发逻辑：更新进度条后同步检查记录，避免重复触发
• 增加了DOM元素存在性检查，防止报错
• 用Math.min确保进度不会超过100%，兼容图钉数量超过总位置的极端情况

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