How to Stop infinite animation in javascript

Question

I have develop an animation you can see below.... Animation was goes infinite time.. I have some conditions.. 1.) If you click the button the ball goes up and down then have to stop on default position... 2.)If u click the button for second time it will shows two balls colliding... How to rectify this issues through javascript

function animationone(cobj) {
    var circle = document.getElementById("circle" + cobj);
    var h = window.innerHeight - 50;

    var btmPos = 0;
    var isForward = true;

    setInterval(function () {
        
        if (btmPos < h && isForward) {
            btmPos += 10;
            isForward = true;

        } else {
            if (btmPos > 20) {
                isForward = false;
                btmPos -= 10;
            } else {
                btmPos += 10;
                isForward = true;
            }

        }
        circle.style.bottom = btmPos + "px";
    }, 100);
};

body{
    background-color: gray;
    position: relative;
    min-height: 558px;
}
.overall{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.box, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{
    width: 9%;
    text-align: center;
    float: left;
    margin-right: 5px;
}

#circle1, #circle2, #circle3, #circle4, #circle5, #circle6, #circle7, #circle8, #circle9, #circle10{
    width: 45px;
    height: 45px;
    background-color: violet;
    z-index: 10;
    border-radius: 30px;
    margin-left: auto;
    margin-right: auto;
    display: table;
    position: absolute;
    bottom: 16px;
}

<div class="overall">
            <div class="box">
                <p id="circle1"></p>
                <hr>
                <button onclick="animationone(1)">Button 1</button>
            </div>

            <div class="box2">
                <p id="circle2"></p>
                <hr>
                <button onclick="animationone(2)">Button 2</button>
            </div>

            <div class="box3">
                <p id="circle3"></p>
                <hr>
                <button onclick="animationone(3)">Button 3</button>
            </div>
            
            <div class="box4">
            <p id="circle4"></p>
            <hr>
            <button onclick="animationone(4)">Button 4</button>
        </div>
            
            <div class="box5">
            <p id="circle5"></p>
            <hr>
            <button onclick="animationone(5)">Button 5</button>
        </div>
            
            <div class="box6">
            <p id="circle6"></p>
            <hr>
            <button onclick="animationone(6)">Button 6</button>
        </div>
            
            <div class="box7">
            <p id="circle7"></p>
            <hr>
            <button onclick="animationone(7)">Button 7</button>
        </div>
            
            <div class="box8">
            <p id="circle8"></p>
            <hr>
            <button onclick="animationone(8)">Button 8</button>
        </div>
            
            <div class="box9">
            <p id="circle9"></p>
            <hr>
            <button onclick="animationone(9)">Button 9</button>
        </div>
            
            <div class="box10">
            <p id="circle10"></p>
            <hr>
            <button onclick="animationone(10)">Button 10</button>
        </div>

        </div>

Answer 1

To stop the interval do the following: Put it into a variable:

window.runner=window.setInterval(...,1000);

Now you can stop it using:

window.clearInterval(window.runner);

As you can see, I've added it to the window scope so that you can clear the interval inside of every function.

Answer 2

I'm not sure if I understood your question or not but based on the interactions I am assuming you want your animations to run without creating more.

I cleared the interval in order to achieve this. Otherwise the a new interval is created on top of the existing one. Each button has it's own animation so the intervals are separate to one another.

I assigned an interval attribute to each button to store the value. It's probably best to store this is the element data object. The HTML onclick events are now also passing in the reference of the element hence the this in the arguments list.

function animationone(cobj, button) {
  if (button.interval) clearInterval(button.interval); // clear the interval if an interval already exists
  var circle = document.getElementById("circle" + cobj);
  var h = window.innerHeight - 50;

  var btmPos = 0;
  var isForward = true;

  var interval = setInterval(function() {

    if (btmPos < h && isForward) {
      btmPos += 10;
      isForward = true;

    } else {
      if (btmPos > 20) {
        isForward = false;
        btmPos -= 10;
      } else {
        btmPos += 10;
        isForward = true;
      }

    }
    circle.style.bottom = btmPos + "px";
  }, 100);
  button.interval = interval; // set the new interval reference
};

body {
  background-color: gray;
  position: relative;
  min-height: 558px;
}
.overall {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.box,
.box2,
.box3,
.box4,
.box5,
.box6,
.box7,
.box8,
.box9,
.box10 {
  width: 9%;
  text-align: center;
  float: left;
  margin-right: 5px;
}
#circle1,
#circle2,
#circle3,
#circle4,
#circle5,
#circle6,
#circle7,
#circle8,
#circle9,
#circle10 {
  width: 45px;
  height: 45px;
  background-color: violet;
  z-index: 10;
  border-radius: 30px;
  margin-left: auto;
  margin-right: auto;
  display: table;
  position: absolute;
  bottom: 16px;
}

<div class="overall">
  <div class="box">
    <p id="circle1"></p>
    <hr>
    <button onclick="animationone(1, this)">Button 1</button>
    <!-- note the extra agrument "this" -->
  </div>

  <div class="box2">
    <p id="circle2"></p>
    <hr>
    <button onclick="animationone(2, this)">Button 2</button>
  </div>

  <div class="box3">
    <p id="circle3"></p>
    <hr>
    <button onclick="animationone(3, this)">Button 3</button>
  </div>

  <div class="box4">
    <p id="circle4"></p>
    <hr>
    <button onclick="animationone(4, this)">Button 4</button>
  </div>

  <div class="box5">
    <p id="circle5"></p>
    <hr>
    <button onclick="animationone(5, this)">Button 5</button>
  </div>

  <div class="box6">
    <p id="circle6"></p>
    <hr>
    <button onclick="animationone(6, this)">Button 6</button>
  </div>

  <div class="box7">
    <p id="circle7"></p>
    <hr>
    <button onclick="animationone(7, this)">Button 7</button>
  </div>

  <div class="box8">
    <p id="circle8"></p>
    <hr>
    <button onclick="animationone(8, this)">Button 8</button>
  </div>

  <div class="box9">
    <p id="circle9"></p>
    <hr>
    <button onclick="animationone(9, this)">Button 9</button>
  </div>

  <div class="box10">
    <p id="circle10"></p>
    <hr>
    <button onclick="animationone(10, this)">Button 10</button>
  </div>

</div>