如何在javascript中停止无限动画

Question

我已经开发了一个你可以在下面看到的动画.. 动画是无限时间的.. 我有一些条件.. 1.）如果您单击按钮，球会上下移动，然后必须停在默认位置... 2.）如果您第二次单击按钮，它将显示两个球碰撞...如何通过以下方式纠正此问题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

要停止间隔，请执行以下操作： 将其放入变量中：

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

现在您可以使用以下方法停止它：

window.clearInterval(window.runner);

如您所见，我已将其添加到窗口范围，以便您可以清除每个函数内部的间隔。

Answer 2

我不确定我是否理解您的问题，但基于交互，我假设您希望您的动画在不创建更多动画的情况下运行。

为了实现这一点，我清除了间隔。否则，将在现有间隔之上创建一个新间隔。每个按钮都有自己的动画，因此间隔是相互独立的。

我为每个按钮分配了一个间隔属性来存储值。最好将其存储为元素数据对象。 HTML onclick 事件现在也传递元素的引用，因此参数列表中的 this。

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>