js 计时器（setTimeout，setInterval）

2018-08-04 本文已影响139人小本YuDL

在使用过程中发现setTimeout()和setInterval()两个计时还是有区别的。来总结一下吧。今天又是新的一天，前一天睡得晚，现在有点困困的，希望学习可以拯救我这萎靡不振的心。(⊙︿⊙)
弄了一早上，我的webstorm还是离开了我。找遍全网，就是没有能激活它的地址，我好难受。真是要阻挠我学习哇，我还是接着用我的HBuilder吧。难过(ಥ﹏ಥ)。

进入正题：
1.setTimeout（）:有两个参数，第一个是要调用的js代码，第二个是在执行前需要等待的时间。setTimeout（）只执行一次，不会重复执行，但是可以自身调用让其重复执行。
与其对应的是 clearTimeout（）去结束执行。

<body>
        <input type="text" value="0" id="time"/>
        <input type="button" value="开始计时"  onclick="timecount()" id="timesum" />
        <input type="button" value="暂停计时" onclick="timestop()" />
        <script>
            var timeCount = 0;
            function timecount(){
                document.getElementById("time").value = timeCount;
                timeCount++;
                setTimeout("timecount()",1000); //自身调用，重复执行
            }
            function timestop(){
                clearTimeout(timeCount);  //停止执行
                document.getElementById("timesum").value = "继续计时"
            }
        </script>
    </body>

2.setInterval（）： 同样有两个参数，第一个是执行的js代码，第二个是执行的间隔时间。
setInterval() 方法会不停地调用函数（重复执行其内容），直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
与其对应的就是 clearInterval（）结束重复执行。

<input type="text" value="0" id="time"/>
        <input type="button" value="开始计时"  onclick="setcount()" id="timesum" />
        <input type="button" value="暂停计时" onclick="setstop()" />
    
<script>
    var timecount = 0;
    function setcount(){
        document.getElementById("time").value =timecount;
        timecount++;    
    }
    var time = setInterval("setcount()", 1000);
    function setstop(){
        clearInterval(time);
    } //即使注册点击事件，也不会再继续计时了。
        
</script>

区别：

setTimeout只运行一次，运行完后即结束。如果想要再次运行同样的setTimeout命令（即要循环运行），需函数自身再次调用 setTimeout()；而 setInterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。
setInterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒。
setTimeout结束计时后，再点击还可以继续计时，而setInterval点击结束后不可再执行。

js 计时器（setTimeout，setInterval）

猜你喜欢

热点阅读