javascript定時器

我正在嘗試使以下JavaScript計時器僅通過單擊一個按鈕來執行兩個功能 - 單擊定時器啓動一次;再次點擊;它停止。再次點擊第三次，等等。我在這裏做錯了什麼？非常感謝你提前。javascript定時器

<html> 
<head> 
    <script type="text/javascript"> 
     var c=0; 
     var t; 
     var timer_is_on=0; 

     function timedCount() 
     { 
      document.getElementById('txt').value=c; 
      c=c+1; 
      t=setTimeout("timedCount()",1000); 
     } 

     function doTimer() 
     { 
      if (!timer_is_on) 
      { 
       timer_is_on=1; 
       timedCount(); 
      } 
     } 

     function stopCount() 
     { 
      clearTimeout(t); 
      timer_is_on=0; 
     } 
     function both(){ 
      doTimer(); 
      stopCount(); 
     } 
    </script> 
</head> 

<body> 
    <form> 
     <input type="button" value="Start count!" onclick="doTimer" /> 
     <input type="text" id="txt" /> 
     <input type="button" value="Stop count!" onclick="stopCount()" /> 
    </form> 
<p> 
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again. 
</p> 
</body> 
</html>

來源

2011-04-23 query

你應該格式化你的代碼的代碼。在每個代碼行前添加四個空格。 – jpsimons 2011-04-23 21:25:52

我在那裏看到兩個按鈕。與你的問題相關的代碼在哪裏？ – 2011-04-23 21:26:01

@query：人們已經回答了你的問題，請花點時間，並將你認爲是你問題的最佳答案的標記，問候 – 2013-05-13 11:04:29

JavaScript的
注意使用true和false代替1和0。

var timer_is_on=false; 
//.. 
function doTimer() 
{ 
    if (!timer_is_on) 
    { 
     timer_is_on=true; 
     timedCount(); 
    } 
    else 
    { 
     timer_is_on=false; 
     stopCount(); 
    } 
}

的HTML
我看到你的按鈕已經被設置爲來電doTimer()onclick（但是，請注意，你缺少的括號內）：
```
<input type="button" value="Start count!" onclick="doTimer()" /> 
```

更改文本的按鈕
首先，將id分配給按鈕：

<input type="button" id="toggleTimer" value="Start count!" onclick="doTimer()" />

接下來，修改JS：

function doTimer() 
{ 
    if (!timer_is_on) 
    { 
     timer_is_on=true; 
     document.getElementById("toggleTimer").value="Stop count!"; 
     timedCount(); 
    } 
    else 
    { 
     timer_is_on=false; 
     document.getElementById("toggleTimer").value="Start count!"; 
     stopCount(); 
    } 
}

來源

2011-04-23 21:28:57

您忘記doTimer後括號：

<input type="button" value="Start count!" onclick="doTimer" />

來源

2011-04-23 21:33:22

試試這個代碼：

var c=0; 
var t; 
var timer_is_on= false; 

function timedCount() { 
    document.getElementById('txt').value=c; 
    c++; 
    if (timer_is_on) { 
     t= setTimeout(timedCount,1000); 
    } 
} 

function doTimer() { 
    if (!timer_is_on) { 
     timer_is_on=true; 
     timedCount(); 
    } 
    else { 
     clearTimeout(t); 
     timer_is_on=false; 
    } 
}

將doTimer() fn附加到每個按鈕上。

例子：http://jsbin.com/onoge4/3

改變我做：用真/假的，而不是1/0。

來源

2011-04-23 21:35:22 Cheeso

它可能是舊的，但它只是救了我的屁股！：O） – 2016-06-17 15:32:33

你沒有描述一個實際的問題，所以我不太確定該回應什麼，但這裏有幾個可能有用的註釋。

timedCount函數是準時間遞歸的。這很酷，如果你使用的是continuation passing style，但它不是必要的，可能比它需要的JavaScript更容易混淆，並且會浪費一些資源（堆棧幀），而這些資源是沒有尾遞歸堆棧清理的語言的不知道JS有沒有）。

由於這是一個重複的功能執行，你可以使用setInterval，而不是setTimeout，並有一個重複的函數調用，檢查，看它是否應該增加和重新顯示個性化......是這樣的：

var c=0; 
var timer_is_on=false; 

function displayCount() { 
    document.getElementById('txt').value=c; 
} 

function count() { 
    if(timer_is_on) { 
     c=c+1; 
     displayCount(); 
    } 
} 

var interval = setInterval(count,1000);

現在，解決單一按鈕部分的問題。比方說，有一個按鈕：

<input type="button" value="Start count!" onclick="toggle" />

當我們點擊它，我們要的是「價值」屬性改變，而且我們希望它翻轉timer_is_on變量。讓我們創建做所有這些事情的函數：

function toggle() { 
    if(timer_is_on) { 
     timer_is_on = false; 
     this.value = "Start count!"; // `toggle` is invoked by the button's event handler, so `this` is the button 
    } else { 
     timer_is_on = true; 
     this.value = "Stop count!"; 
    }     
}

所以...計數始終執行每1000毫秒，但如果timer_is_on它只是做任何事情，不論是否timer_is_on是真的還是假由toggle控制，附在我們的按鈕上。我覺得有點簡單。

UPDATE

如果我們想不具備的功能count一直在後臺運行？正如Tom Tu指出的那樣，這可能代表CPU開銷。我不確定它是否可測量（或者說它代表超出定時器的任何開銷，因爲瀏覽器可能正在執行自己的UI更新），但它在某些平臺上可能很重要，所以它可能是值得解決的。當我們打磨時，我不太喜歡通過標記屬性自己附加事件處理程序，或者將變量放在全局/窗口範圍中，如果我可以避免它，所以我可能會包裹所有相關的計數器設置/處理一個大的setupCounter函數中的JavaScript，並使用DOM選擇和JavaScript將toggle函數附加到輸入按鈕的onclick事件中。我可能會嘗試每次只運行一次document.getElementById查找。

所以，讓我們假設按鈕輸入有ID startstop，但在其他方面假設類似的標記。我可能會做這樣的事情：

function setupCounter() { 
    var c=0, 
     interval, 
     counter_display = document.getElementById('txt'), 
     button = document.getElementById('startstop'); 

    function display_count() { 
     counter_display.value = c; 
    } 

    function count() { 
     c=c+1; 
     display_count(); 
    } 

    function toggle() { 
     if(!interval) 
      interval = setInterval(count,1000); 
      button.value = "Stop count!"; 
     else { 
      clearInterval(interval); 
      interval = false; 
      button.value = "Start count!"; 
     } 
    } 

    button.onclick = toggle; 
}

然後你會打電話setupCounter或者某個文件中都counter_display後startstop元素已被宣佈，或將其分配給window.onload事件或它傳遞的東西像jQuery的$(document).ready()。

來源

2011-04-23 21:52:02

試試這個

<form name="f1"> 
<input type="text" id="but" /> 
<input type="button" value="start" onclick="timer()" /> 
<input type="button" value="stop" onclick="stoptimer()" /> 
</form> 

<script type="text/javascript"> 
var count=0; 
var x; 
function timer(){ 
x=setTimeout("timer()",1000); 
count=count+1; 
document.getElementById("but").value=count; 
} 

function stoptimer(){ 
clearTimeout(x); 
} 

</script>

來源

2013-01-01 18:53:51 kamal

javascript定時器

回答

相關問題