元素在JavaScript函數中只更改了一次

我試圖通過重複更改document.getElementById("ElementID").style.left的值來使用JavaScript進行元素「振動」。我在一個特定的函數中多次改變它，但是每次改變它時，它只會在函數結束時移動，即最後一次進行改變。下面是HTML代碼：元素在JavaScript函數中只更改了一次

<html> 
    <body> 
    <script> 
     function changePosition() { 
      if (document.getElementById("ElementID").style.left == "50%") { 
       document.getElementById("ElementID").style.left = "52%"; 
      } else { 
       document.getElementById("ElementID").style.left = "50%"; 
      } 
     } 

     function vibrate() { 
      changePosition(); 
      setTimeout(changePosition, 50); 
      setTimeout(changePosition, 50); 
      setTimeout(changePosition, 50); 
      setTimeout(changePosition, 50); 
     } 
    </script> 
    <button id="ElementID" type="button" style="position:absolute; top:50%; left:50%;" onclick="vibrate()">Vibrate Me</button> 
    </body> 
</html>

最後我只看到了按鈕的位置，因爲它應該是，但我無法看到的變化在過渡。我究竟做錯了什麼？

來源

2013-12-12 Awais Chishti

這是一個很酷的用戶界面的想法。這只是一個實驗，或者當所需的表單數據不存在時，您是否會振動按鈕？ – Jess

看來，所有的超時將在同一時間執行。嘗試使用的setInterval而不是超時改變此

setTimeout(changePosition,100); 
setTimeout(changePosition,200); 
setTimeout(changePosition,300); 
setTimeout(changePosition,400);

或

for (var i = 1; i < 5; i++) { 
    setTimeout(changePosition,100*i); 
}

來源

2013-12-12 15:06:00

下面有一個例子。亂用的數字，你應該能夠得到您想要的結果

http://jsbin.com/oSIXayun/4/

來源

2013-12-12 15:08:56 LiamB

HTML：

<button id="ElementID" type="button" style="position:absolute; top:50%; left:50%;">Vibrate Me</button>

JS：

function changePosition() { 
    if (document.getElementById("ElementID").style.left=="50%") { 
     document.getElementById("ElementID").style.left="52%"; 
    } 
    else {document.getElementById("ElementID").style.left="50%";} 
} 
function vibrate() { 
    changePosition(); 
    setTimeout(changePosition,50); 
    setTimeout(changePosition,100); 
    setTimeout(changePosition,150); 
    setTimeout(changePosition,200); 
} 
document.getElementById("ElementID").onclick = vibrate;

來源

2013-12-12 15:12:24 Frogmouth

所有setTimeout在vibrate()內撥打電話同時製作。您可以通過根據您需要的振動次數調用changePosition()並使用setTimeout重複該功能來解決此問題。

(function() { 
    var vibrating = 0; 

    function changePosition() { 
     if (document.getElementById("ElementID").style.left == "50%") { 
      document.getElementById("ElementID").style.left = "52%"; 
     } else { 
      document.getElementById("ElementID").style.left = "50%"; 
     } 
     if (vibrating != 0) { 
      vibrating--; 
      var t = setTimeout(changePosition,50); 
     } 
    } 

    function vibrate() { 
     vibrating = 4; 
     changePosition(); 
    } 

    document.getElementById('ElementID').onclick = vibrate; 
})();

來源

2013-12-12 15:13:29 Jonathan

元素在JavaScript函數中只更改了一次

回答

相關問題