title: Number is not incrementing by 1 in JavaScript
body: <p>I have this code where if the opacity is less than or equal to 0, the message number is suppose to go up by 1, but when I run the code, the message number increases by 77 or 152 or 66, etc. Could you help me?
  My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//variables
  var x = 0;
  var opacity = 0;
  var messageNumber = 0;
  var talk1 = ["hello", "welcome to idle ball", "potato"];
  var lol = 1;
  
  
  //set opacity to 1
  function opacitySet1(speed) {
    document.getElementById("talk").style.opacity = opacity;
    opacity += speed;
  }
  
  //set opacity to 0
  function opacitySet0(speed) {
    document.getElementById("talk").style.opacity = opacity;
    opacity -= speed;
  }
  
  
  function IntervalManager(flag, animate, time, para1) {
    if (flag) {
      var intervalSet = setTimeout(animate, time, para1)
    }
  }
  
  
  function IntervalManagerII(flag, animate, time, para1) {
    if (flag) {
      var intervalSetII = setTimeout(animate, time, para1)
    }
  }
  
  //to delay time
  function nothing() {}
  
  
  function message(startPart) {
    document.getElementById("talk").innerHTML = messageNumber;
    if (opacity &gt;= 0 &amp;&amp; lol == 0) {
      setTimeout(nothing, 1);
      IntervalManagerII(true, opacitySet0, 300, 0.005);
      IntervalManager(false)
    }
    if (opacity &lt;= 1 &amp;&amp; lol == 1) {
      IntervalManager(true, opacitySet1, 300, 0.005);
      IntervalManagerII(false)
    }
    if (opacity &lt;= 0) {
      lol = 1;
      IntervalManagerII(false);
      messageNumber += 1;
    } //this is the part that is not working
    if (opacity &gt;= 1) {
      lol = 0;
      IntervalManager(false);
    }
  };
  
  setInterval(function() {
    message(0)
  });</code></pre>
  </div>
  </div>
  </p>