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:

Answer 1

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>