setTimeout定时器以及部分小知识点

setTimeout定时器

难点：

按固定格式输出（hh:mm:ss）
开始，暂停，开始
解决多次点击开始会使定时器速度加快的问题

1. 按固定格式输出

function formatNumber(num) {
    return num < 10 ? '0' + num : num;
}

思路：在每次输出之前格式化一下数据，使用三元运算符，如果小于10就在前面补0。

2. 开始，暂停，开始

var flag = 1;
function Timer() {
    flag = 1;
    if (flag == 1) {
        if (sec <= 59 && sec >= 0 && min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
            document.getElementById('showTime').innerHTML = formatN(hou) + ":" + formatN(min) + ":" + formatN(sec);
            sec = sec + 1;
        } else if (min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
            min = min + 1;
            sec = 0;
        } else if (hou <= 59 && hou >= 0) {
            hou = hou + 1;
            min = 0;
            sec = 0;
        }
        window.timer = setTimeout("Timer()", 1000);
    }
}

function stop() {
    clearTimeout(timer);
    flag = 0;
}

思路：加一个标记flag，开始执行之后改变flag为原来的值并启动定时器，暂停的时候改变flag的值。

3. 解决多次点击开始会使定时器速度加快的问题

出现这个问题的原因：

假如你在0时刻点击了一下按钮，那么500ms时数字会跳一下，1000ms会再跳一下，依次类推，1500，2000，2500…..的时候都会跳一下，时间间隔始终是500ms，但是，假如你在300ms的时候又点击了一下按钮，那么800ms的时候数字就会跳一下，1300，1800，2300…..的时侯都会跳一下，那么现在看0到2000ms之间，300，500，800，1000，1300，1500，1800，2000时刻时数字都会跳一下，数字变化的时间间隔自然会变小，同理，你点击的次数越多，时间间隔就会越小。

解决方案：

每次启动定时器的时候先清一下定时器（clearTimeout()）,此时会有另一个问题，先清定时器会报错：定时器未定义，解决方法是：

if(window.t) clearTimeout(window.t);
window.t =  setTimeout(..... );

window上即使未定义也不会报错。

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        #showTime {
            color: red;
            font-size: 30px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <h1>setTimeout实现计时器</h1>
    <script>
        var sec = 0;
        var min = 0;
        var hou = 0;
        var flag = 1;

        function Timer() {
            flag = 1;
            if (flag == 1) {
                if (sec <= 59 && sec >= 0 && min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
                    document.getElementById('showTime').innerHTML = formatNumber(hou) + ":" + formatNumber(min) + ":" + formatNumber(sec);;
                    sec = sec + 1;
                } else if (min <= 59 && min >= 0 && hou <= 59 && hou >= 0) {
                    min = min + 1;
                    sec = 0;
                } else if (hou <= 59 && hou >= 0) {
                    hou = hou + 1;
                    min = 0;
                    sec = 0;
                }
                if (window.timer) {
                    clearTimeout(timer);
                }
                window.timer = setTimeout("Timer()", 1000);
            }
        }

        function formatNumber(num) {
            return num < 10 ? '0' + num : num;
        }

        function stop() {
            clearTimeout(timer);
            flag = 0;
        }
    </script>
    <button onclick="Timer()">开始计时</button>
    <button onclick="stop()">暂停计时</button>
    <p id="showTime">00:00:00</p>

</body>

</html>