如何在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>