for loop jquery javascript

Question

Why is it that if I give a variable a "0", then in the html the number is "10"? I'm using jQuery and JavaScript both, but as you can see the number in the middle is "10" after I reload the page. It's always "10" and not changing.

I'm trying so that that purple square goes in circles 10 times and I want the middle number to change every round up by one. How can I achieve that?

let calc = 0;

for (let i = 0; i < 11; i++) {
  $('#animate').click(function() {
    $(this).animate({
      top: '350px'
    });
    $(this).animate({
      left: '350px'
    });
    $(this).animate({
      top: '0px'
    });
    $(this).animate({
      left: '0px'
    });
  });
  document.getElementById("szam").innerHTML = calc;
  calc++;
}

#container {
  height: 400px;
  width: 400px;
  background-color: yellow;
}

#animate {
  height: 50px;
  width: 50px;
  position: absolute;
  background-color: rebeccapurple;
}

body {
  margin: 0px;
  padding: 0px;
}

#szam {
  position: absolute;
  top: 100px;
  left: 170px;
  font-size: 72px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
    2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>

<div id="container">
  <div id="animate">
    <p>Hello</p>
  </div>
  <h1 id="szam">0</h1>
</div>

Here's a screenshot:

What do you think, what would calc++ do within the for loop? Ah, wait! You expect to see numbers from 0 to 10? — Teemu
– Teemu, Commented Feb 26, 2018 at 20:39
Why do you expect it to change? Naked eyes can not see the changes made by for-loop :D — void
– void, Commented Feb 26, 2018 at 20:39
I'm trying so that that purple square goes in circles 10 times and I want the middle number to change every round up by one. — Márton Gergő
– Márton Gergő, Commented Feb 26, 2018 at 20:41
you don't see that because a for-loop is processed too many fast to you actually see that, when the page loads, the for already finished and then the number is already 10 — Calvin Nunes
– Calvin Nunes, Commented Feb 26, 2018 at 20:44
@Marton - it's ok to be learning. Ignore anyone who tries to make you feel stupid. They were once that way too. What you are experiencing is not that unusual. The display is not changing because of two things - the for loop runs all the way through very very fast, and Javascript doesn't update the display every time it performs an operation. It does all it's calculations for one 'cycle' and then updates the screen. What you need to do is slow things down. You can do that with a timeout. — Toby
– Toby, Commented Feb 26, 2018 at 20:46

Community · Accepted Answer · 2020-06-20 09:12:55Z

The loop runs relatively quickly, but the animations are queued by default. This means that the code iterates i from 0 to 10 and queues each animation, but displays 10 almost immediately because the loop happens so fast. On the other hand, each animation waits for the previous animation to finish before it starts. So the animation takes much more time to complete than the loop itself.

To demonstrate with the code below, notice that the "Loop is done" message seems to appear as soon as the trigger is clicked.

One solution is to use the complete callback of jQuery's animate to advance the counter when each cycle is complete.

complete
Type: Function()
A function to call once the animation is complete, called once per matched element.

.animate( properties [, duration ] [, easing ] [, complete ] )

var calc = 0;
var elm = document.getElementById("szam");

function advance() {
  calc++;
  elm.innerHTML = calc;
}

$('#animate').click(function() {

  for (var i = 1; i <= 10; i++) {
  
    $(this).animate({
      top: '150px'
    }).animate({
      left: '150px'
    }).animate({
      top: '0'
    }).animate({
      left: '0'
    }, advance);
    
  }

  console.log('Loop is done.');

});

#container {
  height: 200px;
  width: 200px;
  background-color: yellow;
}

#animate {
  height: 50px;
  width: 50px;
  position: absolute;
  background-color: rebeccapurple;
  cursor: pointer;
  color: white;
}

body {
  margin: 0px;
  padding: 0px;
}

#szam {
  position: absolute;
  top: 15px;
  left: 85px;
  font-size: 72px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
    2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>

<div id="container">
  <div id="animate">
    <p>CLICK</p>
  </div>
  <h1 id="szam">0</h1>
</div>

Finally thank you a good answer. I'm sorry if it was a poor/ bad question but I'm just learning/trying and I couldn't figure this out. So sorry but thank you for the answer.

Collectives™ on Stack Overflow

for loop jquery javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related