[译]Javascript timing事件

本文翻译youtube上的up主kudvenkat的javascript tutorial播放单

源地址在此:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

在Javascript中,一段代码可以在某个特定的时间段运行.比如,你可以每1秒进行某个Javscript函数的运行.这个概念在Javascript中被称为timing时间.

全局window对象有着以下两个方法,这两个方法允许我们来在某个特定的时间段里运行一段javascript代码

setInterval(func, delay)

这个方法运行一个特定的函数,然后在特定的时间段内重复.这个方法有两个参数.func参数指定了要运行的函数名.delay参数指定了细节到毫秒的时间段,然后在这个指定时间段内等待下次运行指定函数.

setTimeout(func, delay)

在等待了若干毫秒后运行一个特定函数,这个方法有2个参数.func参数是要指定运行的函数名.delay参数是在执行指定函数之前要等待的时间.具体的等待时间(delay)可能要更长.

我们来用例子理解一下timing时间.以下的代码在div标签内展示了当前时间和日期

<div id="timeDiv" ></div>
<script type="text/javascript">
    function getCurrentDateTime() {
        document.getElementById("timeDiv").innerHTML = new Date();
    }

    getCurrentDateTime();
</script>

此时时间是固定的.为了要让时间动态处理这个脚本,我们注意到时间必须每秒更新.在以下的例子中,我们用setInterval()方法来每1000毫秒执行getCurrentDateTime()函数

<div id="timeDiv" ></div>
<script type="text/javascript">
    setInterval(getCurrentDateTime, 1000);

    function getCurrentDateTime() {
        document.getElementById("timeDiv").innerHTML = new Date();
    }
</script>

clearInterval(intervalID)

这个方法能取消掉用setInterval()方法设置好的反复运行的函数.IntervalID是指定要取消的动作的identifier.这个ID是由setInterval()方法所返回的.以下的例子展示了如何用clearInterval()方法.

由按钮点击动作来开始和停止时钟:在这个例子中,setInterval()方法返回一个intervalID,这个ID会被传到clearInterval()方法中.当你点击"start clock"按钮的时候,始终每秒会更新时间,当你点击"stop clock"按钮的时候,时钟停止.

<div id="timeDiv" ></div>
<br />
<input type="button" value="Start Clock" onclick="startClock()" />
<input type="button" value="Stop Clock" onclick="stopClock()" />
<script type="text/javascript">
    var intervalId;

    function startClock() {
        intervalId = setInterval(getCurrentDateTime, 1000);
    }

    function stopClock() {
        clearInterval(intervalId);
    }

    function getCurrentDateTime() {
        document.getElementById("timeDiv").innerHTML = new Date();
    }

    getCurrentDateTime();
</script>

现在我们来看看使用setTimeout()和clearTimeout()函数的使用例子.格式和用法都和setInterval和clearInterval()类似

<input type="text" value="10" id="txtBox" />
<br /><br />
<input type="button" value="Start Timer" onclick="startTimer('txtBox')" />
<input type="button" value="Stop Timer" onclick="stopTimer()" />
<script type="text/javascript">
    var intervalId;

    function startTimer(controlId) 
    {
        var control = document.getElementById(controlId);
        var seconds = control.value;
        seconds = seconds - 1;
        if (seconds == 0) 
        {
            control.value = "Done";
            return;
        }
        else 
        {
            control.value = seconds;
        }

        intervalId = setTimeout(function () { startTimer('txtBox'); }, 1000);
    }

    function stopTimer() 
    {
        clearTimeout(intervalId);
    }
</script>