JavaScript进度条无限加载的问题

我在页面加载时调用这个进度条函数，并在每个eventListener中调用它，以便在用户与各种输入交互时提供反馈

问题：当我记录控制台日志（progressBar.style.width）时，tt似乎在“永远”运行函数

这是我的密码：

HTML

函数来加载条

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()
})

---

谢谢你的帮助

您的问题是，u向上填充60，所以填充永远不会是100，所以永远不会间隔完成

如果您的加注量为1，则将其更改为

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

        fill ++

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

    }, 50)
}

如果它将上升到60，那么你需要说

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)
}

---

什么是#show pm这是一个复选框输入，它还调用一个函数，该函数通过am/pm过滤对象数组。过滤速度如此之快，以至于用户报告他们没有注意到它做了什么，这就是为什么我想让进度条给他们反馈。你能创建JSFIDLE示例吗？如果你没有解决快速初始化侧边栏，那么你也可以检查这个示例

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

        fill ++

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

    }, 50)
}

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)
}