JavaScript进度条出现无限循环uncaught TypeError报错求解

问题现象 #

进度条初始计数阶段可正常运行，进度走到100%后控制台无限抛出Uncaught TypeError，提示无法设置style属性，后续入场动画完全失效。

错误原因 #

一共4处代码问题，直接触发报错：

• GSAP库名拼写错误：GSAP动画库的全局暴露对象名为gsap，代码中写为gasp，脚本刚运行到第一行就会报gasp未定义的引用错误，直接打断后续所有代码的执行。
• DOM元素获取失败：因为第一行的报错，var bar = document.getElementById("barconfirm")这行赋值逻辑根本没机会运行，bar变量始终是undefined，定时器每隔10ms执行一次进度更新，每次访问bar.style都会触发类型错误，这就是控制台无限抛错的直接原因。
• GSAP动画参数格式错误：gsap.to()的参数规则是第一个参数传要做动画的元素选择器，第二个传动画配置，第三个传时间轴偏移量。原代码把"#percent"、"#bar"两个选择器拆成两个独立参数传入，GSAP会把第二个选择器字符串当成动画配置解析，完全无法识别规则。要给多个元素加相同动画，把多个选择器写在同一个字符串里用逗号分隔即可。
• 类选择器漏写前缀：最后一段动画的目标写为"container h1"，实际container是class类名，选择器中类名前必须加.，否则程序会识别为查找<container>自定义标签，找不到对应的标题元素。

修复后完整代码 #

JavaScript部分 #

// 修正库名拼写错误 gasp -> gsap
const tll = gsap.timeline({
  paused: true
});

// 修正多元素选择器写法，两个目标合并到同一个字符串参数
tll.to("#percent, #bar", {
  duration: .2,
  opacity: 0,
  zIndex: -1
});

tll.to("#preloader", {
  duration: .8,
  width: "0%"
});

tll.from(".container", {
  duration: 1.5,
  y: "-150%"
}, "-=.2");

// 修正类选择器，container前加类名标识.
tll.to(".container h1", {
  opacity: 1,
  textShadow: "12px 20px rgba(255, 255, 255,0.23)",
  skewY: 10,
  y: "10%",
  stagger: {
    amount: .4
  }
});

var width = 1;
// 第一行错误修复后，这行可以正常执行，能正确获取到进度条DOM元素
var bar = document.getElementById("barconfirm");
var id;

function move() {
  id = setInterval(frame, 10);
}

function frame() {
  if (width > 100) {
    clearInterval(id);
    tll.play();
  } else {
    width++;
    bar.style.width = width + "%";
    document.getElementById("percent").innerHTML = width + "%";
  }
}

CSS部分（原代码逻辑正常，无需修改） #

* {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#preloader {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  z-index: 100;
  background-color: #0f0f0f;
  flex-direction: column;
}

#percent {
  color: white;
  font-family: "Neutral Face";
}

#bar {
  width: 60%;
  margin-top: 20%;
}

#barconfirm {
  width: 1%;
  padding: 1px 0px;
  background-color: white;
}

.container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background-color: gray;
}

.container h1 {
  font-family: 'Monument';
  text-transform: uppercase;
  font-size: 40px;
  opacity: 0;
}

HTML部分（补全闭合标签，原逻辑正常） #

<body onload="move()">
  <div id="preloader">
    <div id="percent">1%</div>
    <div id="bar">
      <div id="barconfirm"></div>
    </div>
  </div>
  <div class="container">
    <h1>Leo Clemente</h1>
  </div>
</body>

提醒：运行代码前记得先引入GSAP库文件，不然还是会报找不到gsap对象的错误。

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