JS Browser DOM

JavaScript Timing 事件

Timing 事件 window 对象允许以指定的时间间隔执行代码。这些时间间隔称为定时事件。通过 JavaScript 使用的有两个关键的方法： setTimeout(function, milliseconds) 在等待指定的毫秒数后执行函数。 setInterval(function, milliseconds) 等同于 setTimeout()，但持续重复执行该函数。 setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。
setTimeout() 方法

    window.setTimeout(function, milliseconds);

window.setTimeout() 方法可以不带 window 前缀来编写。第一个参数是要执行的函数。第二个参数指示执行之前的毫秒数。

    <!-- 单击按钮。等待 3 秒，然后页面会提示 "Hello"：-->

    <button onclick="setTimeout(myFunction, 3000)">试一试</button>

    <script>
        function myFunction() {
            alert('Hello');
        }
    </script>

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

    myVar = setTimeout(function, milliseconds);
    clearTimeout(myVar);

setInterval() 方法 setInterval() 方法在每个给定的时间间隔重复给定的函数。

    window.setInterval(function, milliseconds);

window.setInterval() 方法可以不带 window 前缀来写。第一个参数是要执行的函数。第二个参数每个执行之间的时间间隔的长度。本例每秒执行一次函数 “myTimer”（就像数字手表）。

    // 显示当前时间：
    // 间隔 1000 毫秒循环执行函数 myTimer()
    var myVar = setInterval(myTimer, 1000); // 一秒有 1000 毫秒。
    
    function myTimer() {
        var d = new Date();
        document.getElementById("demo").innerHTML = d.toLocaleTimeString();
    }

另一个创建时钟的方式

    <!DOCTYPE html>
    <html>
    <head>
        <script>
            function startTime() {
                var today = new Date();
                var h = today.getHours();
                var m = today.getMinutes();
                var s = today.getSeconds();
                m = checkTime(m);
                s = checkTime(s);
                document.getElementById('txt').innerHTML =
                    h + ":" + m + ":" + s;
                // setTimeout() 只会执行一次，所以需要每次都进行设置等待执行时间 500 毫秒
                // 等待 500 毫秒后调用函数 startTime()
                var t = setTimeout(startTime, 500); 
            }
            function checkTime(i) {
                if (i < 10) { i = "0" + i };  // 在数字 < 10 之前加零
                return i;
            }
        </script>
    </head>
    <body onload="startTime()">
        <div id="txt"></div>
    </body>
    </html>

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

    myVar = setInterval(function, milliseconds);
    clearInterval(myVar);

参考内容

首页 > 学习总览 > 开发语言 > JavaScript

blogSite

我是谁？我在哪儿？我在干什么？

JS Browser DOM

JavaScript Timing 事件

参考内容