[译]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>

巴特西

[译]Javascript timing事件

最新文章

热门文章