Fatal编程技术网

javascript定时器

javascript

javascript定时器,javascript,Javascript,我试图让下面的javascript定时器只需点击一个按钮就可以执行两个功能——定时器启动后点击；再次点击；它停了。第三次单击，它将再次启动，依此类推。我在这里做错了什么？事先非常感谢 <html> <head> <script type="text/javascript"> var c=0; var t; var timer_is_on=0; function timedCoun

我试图让下面的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>


var c=0；
变量t；
var定时器_为_on=0；
函数timedCount（）
{
document.getElementById（'txt'）。value=c；
c=c+1；
t=setTimeout（“timedCount（）”，1000）；
}
函数doTimer（）
{
如果（！计时器打开）
{
定时器_为_开=1；
timedCount（）；
}
}
函数stopCount（）
{
清除超时（t）；
定时器_为_开=0；
}
函数二（）{
多蒂默（）；
停止计数（）；
}

单击上面的“开始计数！”按钮以启动计时器。输入字段将永远计数，从0开始。单击“停止计数！”按钮停止计数。单击“开始计数！”按钮再次启动计时器。
  • JavaScript
    注意使用
    true
    和
    false
    而不是
    1
    和
    0

  • HTML
    我看到您的按钮已设置为call
    doTimer（）
    onclick
    （但是，请注意，您缺少括号）：

    接下来，修改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();
    }
}
  • JavaScript
    注意使用
    true
    和
    false
    而不是
    1
    和
    0

  • HTML
    我看到您的按钮已设置为call
    doTimer（）
    onclick
    （但是，请注意，您缺少括号）：

    接下来，修改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();
    }
}
    • 您忘记了doTimer后面的括号：

    <input type="button" value="Start count!" onclick="doTimer" />
    您忘记了doTimer后面的括号：

    <input type="button" value="Start count!" onclick="doTimer" />
    尝试以下代码：

    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连接到每个按钮上

    例如：

    我所做的更改：使用true/false而不是1/0。

    尝试以下代码：

    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连接到每个按钮上

    例如：

    我所做的更改：使用true/false而不是1/0。

    您没有描述实际的问题，因此我不太确定该用什么来回答，但这里有几个可能有用的注释

    timedCount函数是准定时递归函数。如果您喜欢，这很酷，但这不是必需的，可能比JavaScript需要的更令人困惑，并且会在没有尾部递归堆栈清理的语言中浪费一些资源（堆栈帧）（不知道JS是否有）

    由于这是一个重复的函数执行，您可以使用而不是
    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);

    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;
}
    现在，解决问题的单按钮部分。假设只有一个按钮：

    <input type="button" value="Start count!" onclick="toggle" />
    所以。。。count总是每1000毫秒执行一次，但它只在timer\u打开时才执行任何操作，timer\u是否打开是真是假由按钮上的
    开关控制。我觉得简单一点
    
更新
    
如果我们不想让函数
    count
    始终在后台运行，该怎么办？正如Tom Tu指出的，这可能表示CPU开销。我不确定这是否是一个可测量的指标（或者它代表了浏览器可能运行以进行自己的UI更新的计时器之外的任何开销），但它在某些平台上可能很重要，因此可能值得解决
    
在我们改进的过程中，我自己不太喜欢通过标记属性附加事件处理程序，如果可以避免的话，也不喜欢将变量放在全局/窗口范围内，因此我可能会将所有相关的计数器设置/处理JavaScript封装在一个大的
    setupCounter
    函数中，还可以使用DOM选择和JavaScript将
    toggle
    函数附加到输入按钮的
    onclick
    事件。我可能会尝试每次只运行一次
    document.getElementById
    查找
    
因此，假设按钮输入具有id
    startstop
    ，但在其他方面采用类似的标记。我可能会这样做：
    

    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);

    

    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;
}

    

    然后，您可以在声明了counter\u display和startstop元素之后在文档中调用
    setupCounter
    ，或者将其分配给
    窗口。onload
    事件，或者将其传递给jQuery的
    $（document）.ready（）
    之类的对象
     您没有描述实际的问题，所以我不太确定该用什么来回答，但这里有几个可能有用的注释
    
timedCount函数是准定时递归函数。如果您喜欢，这很酷，但这不是必需的，可能比JavaScript需要的更令人困惑，并且会在没有尾部递归堆栈清理的语言中浪费一些资源（堆栈帧）（不知道JS是否有）
    
由于这是一个重复的函数执行，您可以使用而不是
    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);

    

    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;
}

    
现在，解决问题的单按钮部分。假设只有一个按钮：
    

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

    
所以。。。count总是每1000毫秒执行一次，但它只在timer\u打开时才执行任何操作，timer\u是否打开是真是假由按钮上的
    开关控制。我觉得简单一点
    
更新
    
如果我们不想让函数
    count
    始终在后台运行，该怎么办？正如Tom Tu指出的，这可能代表一个CPU o