Проблемы с JavaScript индикатором загрузки бесконечно - PullRequest
Новая
       11

Проблемы с JavaScript индикатором загрузки бесконечно

0 голосов
/ 13 апреля 2020

Я вызываю эту функцию индикатора выполнения, когда страница загружается и с каждым 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 + bootstrap

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

Спасибо за любую помощь!

1 Ответ

1 голос
/ 13 апреля 2020

Ваша проблема в том, что вы заполняете 60, поэтому заполняемость никогда не будет равна 100, поэтому интервал не будет конечным это будет как 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)
}
...