Javascript setInterval()和clearIn

2019-04-26 本文已影响0人月巴月巴

注意： setInterval（）返回值必须作为clearInterval()的入参才能把定时器停了。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
    <span id="seconds"></span><span> Seconds Left</span>
    <br>
    <button id="restart">Restart</button>


    <script type="text/javascript">
        $(function(){
            configDomEventHandlers();
            runCountDownJob();
        });

        var total = 5;
        var countDownJobId = null;

        var configDomEventHandlers = function() {
            $("#restart").click(restart);
        };

        var restart = function() {
            total = 5;
            stopCountDown();
            runCountDownJob();
        };

        var runCountDownJob = function() {
            countDownJobId = setInterval(countDownJobDetail, 1000);
        };

        var countDownJobDetail = function() {
            if (total >= 0) {
                countDown();
            } else {
                stopCountDown();
            }
        };

        var countDown = function() {
            $("#seconds").text(total--);
        };

        var stopCountDown = function() {
            clearInterval(countDownJobId);
            countDownJobId = null;
        };
    </script>
</body>
</html>

Javascript setInterval()和clearIn

猜你喜欢

热点阅读