How to Stop unendliche Animation in Javascript

Question

Ich habe eine Animation entwickelt, die Sie unten sehen können .... Animation war endlose Zeit .. Ich habe einige Bedingungen .. 1.) Wenn Sie auf den Button klicken, geht der Ball nach oben und nach unten, dann auf Standardposition zu stoppen ... 2.) Wenn u die Taste für zweites Mal klicken, wird es zeigt zwei Kugeln kollidieren ... Wie diese Probleme durch 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

Ich bin mir nicht sicher, ob ich Ihre Frage verstanden habe oder nicht, aber basierend auf den Interaktionen nehme ich an, dass Sie Ihre Animationen ausführen möchten, ohne mehr zu erstellen.

Ich habe das Intervall gelöscht, um dies zu erreichen. Andernfalls wird ein neues Intervall über dem vorhandenen Intervall erstellt. Jede Taste hat ihre eigene Animation, so dass die Intervalle voneinander getrennt sind.

Ich habe jedem Button ein Intervall-Attribut zugewiesen, um den Wert zu speichern. Es ist wahrscheinlich am besten zu speichern, das ist das Element Datenobjekt. Die HTML-onclick-Ereignisse übergeben jetzt auch die Referenz des Elements, also die this in der Liste der Argumente.

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>

Answer 2

zu beheben

Um das Intervall zu stoppen, machen Sie folgendes: Setzen Sie es in eine Variable:

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

Jetzt können Sie es mit stoppen:

window.clearInterval(window.runner); 

Wie Sie sehen können, habe ich es zum Fenster Umfang hinzugefügt haben, so dass Sie das Intervall innerhalb jeder Funktion löschen.