javascript计时器

Question

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Wes*_*n C 6

你没有描述一个实际的问题,所以我不太清楚要回答什么,但这里有几个可能有用的注意事项.

timedCount函数是准时间递归的.如果你是继续传递样式,这很酷,但它没有必要,可能比它需要的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);

Run Code Online (Sandbox Code Playgroud)

现在,解决问题的单键部分.假设有一个按钮:

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

Run Code Online (Sandbox Code Playgroud)

当我们点击它时,我们希望"value"属性发生变化,我们希望它能够翻转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!";
    }                   
}

Run Code Online (Sandbox Code Playgroud)

所以... count总是每1000ms执行一次,但只有当timer_is_on,以及timer_is_on是否为true或false由toggle附加到我们的按钮控制时,它才会执行任何操作.我想,有点简单.

UPDATE

如果我们想不具备的功能count一直在后台运行？正如Tom Tu所指出的,这可能代表CPU开销.我不确定它是一个可衡量的(或它代表浏览器可能运行以执行其自己的UI更新的计时器之外的任何开销),但它在某些平台上可能很重要,因此它可能值得解决.

虽然我们正在抛光,但我不太喜欢自己通过标签属性附加事件处理程序,或者如果我可以避免将变量放在全局/窗口范围内,那么我可能会将所有相关的计数器设置/处理JavaScript包装在里面一个大setupCounter功能,并使用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;
}

Run Code Online (Sandbox Code Playgroud)

然后setupCounter,在声明了counter_display和startstop元素之后,您可以在文档中的某个时间调用,或者将其分配给window.onload事件或将其传递给jQuery之类的东西$(document).ready().

归档时间：	15 年，1 月前
查看次数：	22314 次
最近记录：	13 年，4 月前