Stuck with looping data-percent

1

Hi,
I have been trying to animate the circular progress div (https://codepen.io/eradityaoli/pen/KXxOBx). Though I was able to do it when the circular progress div gets clicked upon, but am stuck while trying to animate is using setTimeOut, for even had created a wait() method to wait for the milliseconds defined. A little help with this would be highly appreciated.
Thanks.

2

It’s very difficult to actually see the JS at all: something that you’ve written is running immediately on page load, uses all available memory, and kills the browser tab. Can you edit the code so that it doesn’t do that (at least not running immediately would be a start), or describe the problem alongside relevant code if you can’t do that.

You should just be able to trigger an animation with the duration set to what you want like https://codepen.io/DanielCouper/pen/xXQLgQ/ (uses SVG for the button image in that example, but could rotate shapes drawn with CSS or whatever).

1 Like
3

Link to your pen with JS turned off so it’s viewable

Your custom wait() function has a serious problem:

function wait(ms)
{
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) // keep running this loop the whole time
   {
     end = new Date().getTime();
   }
}

This locks up the browser for however long you tell it to with the ms parameter you pass in. Here’s what the code’s doing if you pass in 1000:

Is it 1 second yet?
No.
Is it 1 second yet?
No.
Is it 1 second yet?
No.

…Roughly 4,000,000 iterations later…

Is it 1 second yet?
Yes.
OK, you can go back to whatever you were doing before then. Hope it wasn’t important!

That’s not the most serious problem, though. The most serious problem is that perc never increments within your while loop. You created an identically-named perc variable within the click handler, but it doesn’t exist in the while loop scope so it’s actually a different variable. So you have an infinite loop, which is like this:

Are we there yet?
No.
Are we there yet?
No.
Are we there yet?
No.

…After all human life is extinguished (some time in early 2018)…

Are we there yet?
No.

…After the heat death of the universe…

Are we there yet?
No.

1 Like
4

Oh… now I get it. Thanks a lot.

I feel ashamed for such a puny mistake though. :disappointed:

5

Now that have removed the wait function functionality, and the perc variable has been made global. How do I make it increment every second along with the animation? I mean I tried doing that with the animator() method. But it does not reload every second.

6

I’m not sure why you need a global perc variable.

You keep a record of the percentage in a data attribute, that’s fine, means you can stop and start etc, though I’m not sure it’s strictly necessary to have that both as an attribute and a global variable, one or the other is fine. Maybe I’m missing something here but normally I would expect it to be something like:

  1. Percent data attribute is 0
  2. On click, read that, and pass it as an argument to the function used to animate.
  3. That has your setTimeout function expression, in which:
  4. If % is 100, call clearTimeout, your done.
  5. If not, calculate the degrees.
  6. Apply the CSS rotate property + whatever else needs updating.
  7. Call your setTimeout function recursively with perc incremented by 1…
  8. Which takes you back to 5