Error in function for load bar using a while(){}

Asked

Viewed 59 times

0

I’m trying to set up a charging bar that starts after 2 seconds of loading the document, Her every 100 thousandths of a second win 1% of width. However, when the page loads, console.log() shows that the function is running, but nothing happens. How can I fix the problem ?

$(document).ready(function(){
    setTimeout(function(){
        var count = 0;
        while(count < 100){
            setTimeout(function(){
                $("#loader-progress").css({"width":count + "%"})
            },500)
            count++;
        }
    },2000);
});
javascript jquery css

  • Voce can use debugger;, inside your while, open your browser Devtools and see the pq is crashing. =)

  • but it hangs the page, not allowing you to open devtools

  • leaves devTolls open, before calling the page =)

  • 1

    tries to put Count++ just below while and multiply the 100 of the timeout by Count (100*Count), I think it will work...

  • put Count++ below while and stopped crashing, but no errors appear yet, edited question :D

  • I tried to multiply Count in timeout but it didn’t work

  • 1

    And how is the CSS of your Loader-Progress? If Voce increase manual width, it is increasing?

  • manually works

  • @Withilogambôa what you have to multiply is the delay of the timeout, in which case it would be 500*Count: setTimeout(function(){&#xA; $("#loader-progress").css({"width":count + "%"})&#xA; },500*count)

  • yes @Juniornunes, I understood, however, it did not run

Show 5 more comments

2 answers

1


Every call from that code snippet:

setTimeout(function(){

       $("#loader-progress").css({"width":count + "%"})
       count++;
},100)

will have the value of count set to zero. That is, you have entered an infinite loop because count will never be incremented in the right context.

To correct your code, I changed your setTimeout from within by a setInterval, calling the function repeatedly, in the following example:

$(document).ready(function(){
    setTimeout(function(){
            var count = 0;
            var idIntervalo =  setInterval(function(){
                            if(count == 105){ clearInterval(idIntervalo); }
                            $("#loader-progress").css("width", count + "%");
                            count++;
            }, 100);
    },2000);
});

The idIntervalo is necessary as it is the only way to stop calls when reaching the goal, using the method clearInterval.

You can check a functional example in the link below

https://jsfiddle.net/1j1tf3ny/1/

  • how to do using a while ?

  • You really need it to be done with while and setTimeout?

  • yes :3 by me I would do with if same, but it is that I am training with while by being half weak at that point

1

Well, after a while trying, I was able to solve the problem, I marked the answer of @Arturtrapp as the right one, because it gave me the right direction to solve the problem.

Well, the code was reworked to

$(document).ready(function(){
    setTimeout(function(){
        var count = 0;
        setInterval(function(){
            while(count !== 100.5){
                $("#loader-progress").css({"width":count + "%"})
                count = count + 0.5;
            }
        },10);
    },2000);
});

However, there is a problem, he plays from $("#loader-progress") of 0% for 100% on the very first loop. But, just replacing while, for if, the same works perfectly in the timer placed, then staying: 

$(document).ready(function(){
    setTimeout(function(){
        var count = 0;
        setInterval(function(){
            if(count !== 100.5){
                $("#loader-progress").css({"width":count + "%"})
                count = count + 0.5;
            }
        },10);
    },2000);
});
  • Was placed a count !== 100.5 as a condition, since the 100, the same would give a width maximum of 99.5% in the $("#loader-progress") since the counter would need to be different from 100 so that the if were executed

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.