day27—JavaScript实现定时器及其应用案例

转行学开发，代码100天——2018-04-12

JavaScript中定时器有两种，分别是setInterval和setTimeout;其用法如下：

开启：

setTimeout("function",time) 设置一个超时对象；延迟执行；只执行一次

setInterval("function",time) 设置一个超时对象；连续执行；重复执行

*上述两种方法，均有返回值，即改定时器对象。该对象可作为关闭对象输入。

关闭：

clearTimeout(对象) 清除已设置的setTimeout对象 
clearInterval(对象) 清除已设置的setInterval对象

如window对象的开启及关闭

var timer = window.setInterval(express,millseconds);

window.clearInterval(timer);

var timer = window.setTimeout(express,millseconds);
window.clearTimeout(timer);

定时器启停用例：

设置两个按钮，分别控制定时器的开启和关闭

<input type="button" name="start" id="btn1" value="start">
<input type="button" name="stop" id="btn2" value="stop">

JavaScript实现定时器的启停控制

<script type="text/javascript">
         //定时器用法
        // var timer = window.setInterval(express,millseconds);window.clearInterval(timer);
        //     var timer = window.setTimeout(express,millseconds);
        //     window.clearTimeout(timer);
        window.onload = function () {
            var btn1 = document.getElementById("btn1");
            var btn2 = document.getElementById("btn2");
            var timer = null;

            btn1.onclick =function(){

                timer =setInterval(function()
                {
                  alert("hello");
                },1000);
            };

            btn2.onclick = function(){
                clearInterval(timer);
            };

        }
    </script>

点击“start”按钮，每隔一秒弹出提示框“hello”，即定时器开启;点击“stop”按钮，提示框不再弹出，即定时器关闭。

原文地址：https://www.cnblogs.com/allencxw/p/8858062.html