「setInterval」的定時器是一個變量

我正在製作一個彈跳球動畫。我想要一個表格（num1和num 2），它應該用變量「int1」或「int2」作爲「draw1」或「draw2」的計時器。加載文件並在文本框中輸入數字，然後提交它們不會改變間隔。我真的需要幫助。「setInterval」的定時器是一個變量

<!DOCTYPE HTML> 
<head> 
<title>Follow the Bouncing Ball</title> 
<script> 
var context; 
var x=50; 
var y=240; 
var dx=5; 
var dy=5; 
var int1=form.getElementById('num1').value; 
var int2=form.getElementById('num2').value; 

function init() 
{ 
    context=myCanvas.getContext('2d'); 
    setInterval(draw1,int1) 
    setInterval(draw2,int2) 
} 

function draw1() 
{ 
    context.clearRect(0,0, 100,500); 
    context.beginPath(); 
    context.fillStyle="#0000ff"; 
    context.arc(x,y,30,0,Math.PI*2,true); 
    context.closePath(); 
    context.fill(); 
    //Boundary Logic 
if(y<35 || y>470) dy=-dy; 

y+=dy 

} 

function draw2() 
{ 
    context.clearRect(100,0, 200,500); 
    context.beginPath(); 
    context.fillStyle="#0000ff"; 
    context.arc(x+150,y,30,0,Math.PI*2,true); 
    context.closePath(); 
    context.fill(); 
    //Boundary Logic 
if(y<30 || y>450) dy=-dy; 

y+=dy 

} 

function validate(evt) { 
    var theEvent = evt || window.event; 
    var key = theEvent.keyCode || theEvent.which; 
    key = String.fromCharCode(key); 
    var regex = /[0-9]|\./; 
    if(!regex.test(key)) { 
    theEvent.returnValue = false; 
    if(theEvent.preventDefault) theEvent.preventDefault(); 
    } 
} 

</script> 

<body onLoad="init()"> 
<canvas id="myCanvas" width="1300" height="500"> 
</canvas> 
<form> 
    <input type="number" id="num1" min="1" placeholder="Enter Number" autofocus required onkeypress='validate(event)'/> 
    <input type="number" id="num2" min="1" placeholder="Enter Number" required onkeypress='validate(event)'/> 
    <input type="submit" value="Animate"> 

</form> 
</body> 
</html>

我真的不能用窗體中鍵入的數字替換「int1」或「int2」。

來源

2014-01-12 user3187783

一旦間隔開始，它需要它再次調用之前就已經通過了，並且你不能改變它的時候。解決方法是使用遞歸timeOut而不是 – adeneo

嘗試使用parseInt像這樣：

int2=parseInt(form.getElementById('num2').value);

沒有parseInt，它認爲，INT1和INT2都是字符串。

來源

2014-01-12 17:22:15 mjkaufer

你在這裏得到的字符串：

form.getElementById('num1').value;

你應該分析string到int。

來源

2014-01-12 17:22:43 Niezborala

這兩條線：

var int1=form.getElementById('num1').value; 
var int2=form.getElementById('num2').value;

的DOM加載之前正在執行。出於這個原因，你肯定會在瀏覽器控制檯中發生錯誤。將這些移動到「init」函數中。

然而，一旦你這樣做，仍然將無法正常工作，因爲你正在啓動定時器響應頁面加載完成（「加載」事件）。如果你需要某人輸入值，那顯然不會起作用。最簡單的做法是添加一個「開始」按鈕，並將「單擊」事件耦合到「init」函數。編輯哦，好的，你已經有了一個「動畫」按鈕。這應該是你設置「點擊」處理程序的地方。

最後，正如其他人已經指出的那樣，您需要將輸入字段的值解釋爲數字。

來源

2014-01-12 17:25:04 Pointy

我已經嘗試使用「Animate」作爲提交按鈕或單擊按鈕執行「init（）」並將字符串更改爲var int = parseInt（document.getElementById（「 num1「）。value）但它不起作用。我錯過了什麼嗎？ – user3187783

我知道無法在創建後更改超時時間間隔。

我只是取消並重新創建值更改超時。

來源

2014-01-12 17:25:05 Scimonster

您可以使用setTimeout而不是setInterval，因此您可以創建'等待'時間變量。所以，與其這樣：

var waitTime = 1000; 
setInterval(function(){ 
    //your logic here 
}, waitTime); //Here waitTime sticks with the initial value

你這樣做：

var waitTime = 1000; //This can change anytime 
(function tick(){ 
    //your logic here 
    setTimeout(tick, waitTime); //Here waitTime can vary in any cycle 
})();

的區別，是與setTimeout，您可以修改waitTime隨時隨地會影響下一個週期。但隨着setInterval，初始值將保持「永遠」

此外，當您單擊按鈕您的計時器應該更新，所以你應該有：

var int1 = 1000, int2 = 1000; //Just default values 
var document.querySelector("form input[type=submit]").addEventListener("click", function(){ 
    int1 = parseInt(document.getElementById('num1').value); 
    int2 = parseInt(document.getElementById('num2').value); 
    return false; //Prefents form from being submited (I think you need this) 
});

希望這有助於。乾杯

來源

2014-01-12 17:29:31

setInterval的計時器是函數draw1和draw2進行處理的速度（清除區域，製作圓圈，增加位置），對不對？我對這件事還是很陌生的。抱歉。 – user3187783

其他人告訴你你應該改變一個字符串爲數字是真實的，但它不能解決你的問題。你以爲奇蹟般的想法在var int1=form.getElementById('num1').value曾經在腳本的開頭int1被綁定到num1的值字段。當然情況並非如此。 var foo=bar是作爲任務，僅此而已; num1在賦值時被分配一個實際值，並且表達式被遺忘。

另一個神奇的想法是當你認爲setInterval(draw1,int1)立即改變間隔時間int1改變值。不，在調用時調用setInterval的實際值爲int1，它不關心值的來源（谷歌「通過值傳遞參數」來了解一般原則）。

你需要做的，是

安裝提交處理形式（谷歌「的onsubmit」如果你不想使用jQuery，或使用jQuery的.on('submit', function() {...})）。處理器內部，
- 停止計時器（clearInterval(timer1); clearInterval(timer2);），但這意味着您必須將結果保存在setInterval調用變量timer1和timer2;
- 然後重新安裝新的計時器（也記住它們爲timer1和timer2，以便它們可以在隨後的表單提交時停止）。

來源

2014-01-12 17:34:33

「setInterval」的定時器是一個變量

回答

相關問題