JavaScript进度条无限加载的问题

Question

我在页面加载时与每个eventListener一起调用此进度条函数，以便在用户与各种输入进行交互时向用户提供反馈。

问题：当我控制台日志（progressBar.style.width）时，该函数似乎永远运行”>

这是我的代码：

HTML

   <div class="progress">
       <div class="progress-bar" id="progressbar" role="progressbar" style="width: 0%" aria- 
       valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
CSS +引导程序

.bar_container{
    width: 50%;
    margin: 0px auto;
    margin-top: 20px;
}
加载条的功能

progressBar = document.getElementById("progressbar")

   function loadBar() {
    let fill = 0
    window.setInterval(function() {

        fill += 60

        if (fill === 100) {
            clearInterval()
        } else {
            progressBar.style.width = fill + "%"
            console.log(progressBar.style.width) // seems like this function runs infinitely ???
        }

    }, 50)
}
带有事件监听器的调用功能

document.querySelector('#show-pm').addEventListener('change', function (e) {
    filters.hideAm = e.target.checked
    filterMeetings(filters)
    progressBar.style.width = "0%" //Intending to reset the progress to 0% ???
    loadBar()
})
感谢您的帮助！

我在页面加载时与每个eventListener一起调用此进度条函数，以便在用户与各种输入进行交互时向用户提供反馈。问题：tt似乎函数是...

Answer 1

您的问题是您最多填充60个，所以填充永远不会是100个，并且永远不会间隔结束