为何JavaScript进度条无法在输入框指定数值处停止？

进度条无法停止的核心bug是变量取值时机错误：

• 你在页面刚加载的全局阶段就执行了var Numerica = parseInt(My_Button.value)，此时用户还未在输入框填写内容，输入框值为空字符串，parseInt转换空值会得到NaN
• JS中所有数值和NaN做大小比较的返回值永远是false，因此判断条件width >= Numerica永远不成立，clearInterval不会被执行，定时器持续运行，进度条就不会停止。

另外还有三处小问题：

• 全局作用域下的var i = 0;是完全没用的冗余代码
• CSS设置进度条初始宽度为2%，但JS中定时器启动时将width初始化为1，会导致点击按钮后进度条先跳回1%再增长，体验不一致
• 缺少输入合法性校验，用户输入非数字、大于100或负数时会出现异常

把输入框取值逻辑移到update函数内部（点击按钮时才读取用户输入的最新值），补上非法值兜底，对齐初始宽度即可，CSS和HTML部分无需修改，替换JS代码为以下内容即可：

function update() {
  // 点击按钮时读取输入框最新值，做合法性校验和边界兜底
  var targetWidth = parseInt(document.getElementById("btn1").value);
  if (isNaN(targetWidth) || targetWidth < 0) targetWidth = 0;
  if (targetWidth > 100) targetWidth = 100;

  var progressBar = document.getElementById("myprogressBar");
  // 初始宽度和CSS默认值对齐，避免进度条回跳
  var currentWidth = 2;
  var timer = setInterval(function() {
    if (currentWidth >= targetWidth) {
      clearInterval(timer);
      return;
    }
    currentWidth++;
    progressBar.style.width = currentWidth + '%';
  }, 10);
}

修正后效果符合预期：在输入框填入目标百分比数值，点击「Start Download」按钮，进度条会逐步增长到对应数值的百分比位置后自动停止。

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