因此，在代碼中，按下按鈕將使紅色框產生動畫效果。單擊該按鈕會將其沿對角線移動。但是，如果我們在動畫發生時再次單擊該按鈕，或者多次單擊該按鈕，則會產生閃爍效果。我們該如何解決這個問題？<!DOCTYPE html><html><style>#container { width: 400px; height: 400px; position: relative; background: yellow;}#animate { width: 50px; height: 50px; position: absolute; background-color: red;}</style><body><p><button onclick="myMove()">Click Me</button></p> <div id ="container"> <div id ="animate"></div></div><script>function myMove() { var elem = document.getElementById("animate"); var pos = 0; var id = setInterval(frame, 5); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + "px"; elem.style.left = pos + "px"; } }}</script></body></html>
2 回答
慕森王
TA貢獻1777條經驗 獲得超3個贊
您需要在動畫進行時設置一個標志，并且在動畫仍在進行時不要執行該函數
var animationInProgress = false;
function myMove() {
if (animationInProgress) {
return;
}
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
animationInProgress = true;
function frame() {
if (pos == 350) {
animationInProgress = false;
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p>
<div id="container">
<div id="animate"></div>
</div>
慕桂英546537
TA貢獻1848條經驗 獲得超10個贊
我能想到的有兩種方法：
第一個是禁用按鈕，并創建一個計時器（setTimeout）來重新啟用它
第二個是保存第二次單擊的時間，并檢查您的單擊處理程序是否很快發生另一次單擊（使用保存的第二次單擊時間）。
- 2 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消