一次性计时器和间隔性计时器实现永久性计时器

来源：互联网发布：网络婚姻网编辑：程序博客网时间：2024/05/22 15:35

一次性计时器和间隔性计时器实现永久性计时器

定时函数
setTimeout()函数在指定的毫秒数后调用函数或计算机表达式。只调用一次。
setInterval()函数可按指定的周期(以毫秒计)来调用函数或计算表达式。该方法运行后会不停的调用函数，直到窗口关闭或被其他方法强制停止。

setInterval()方法是有返回值，返回这个函数在当次调用时的唯一的一个id值。clearInterval(id)方法可以利用setInterval()方法的返回值(id)来停止当前计数器。
setTimeout()方法也有返回值，与setInterval()方法的返回值一样，也可以用clearTimeout()方法停止当前计数器。

*需要注意的是：setTimeout()只执行函数一次，如果要多次调用函数，需要使用setInterval()或者让被调用的函数再次调用setTimeout()；
所以要想变成永久性计时器，在一次性计时器的被调用函数中再次调用setTimeout()即可。

代码实例：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>定时器</title>        <style type="text/css">            section{                width:280px;                height:250px;                border:2px solid #ccc;                margin: 10px;                padding: 0px 0px 20px 20px ;            }        </style>        <script type="text/javascript">            function getTime0 () {                let time = new Date();                let month = time.getMonth()+1;                let day=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];                let weekday=day[time.getDay()];                document.getElementById("timeShow0").innerHTML=time.getFullYear()+"年"+month+"月"+time.getDate()+"日      "+weekday+"<html>&nbsp;&nbsp;&nbsp;&nbsp;</html>" +time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();                time0 = setTimeout(getTime0,1000);    //在函数内调用            }            function getTime1 () {                let time = new Date();                let month = time.getMonth()+1;                let day=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];                let weekday=day[time.getDay()];                document.getElementById('timeShow1').innerHTML=time.getFullYear()+"年"+month+"月"+time.getDate()+"日      "+weekday+"<html>&nbsp;&nbsp;&nbsp;&nbsp;</html>" +time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();            }            function init() {                getTime0();                time1 = setInterval(getTime1,1000);                document.getElementById('btn_stop0').addEventListener('click',(event)=>{                    console.log(event.target.innerHTML);                    if (event.target.innerHTML=="停止") {                        clearTimeout(time0);                        event.target.innerHTML="开始";                    } else{                        getTime0();                    }                },false);                document.getElementById('btn_stop1').addEventListener('click',(event)=>{                    console.log(event.target.innerHTML);                    if (event.target.innerHTML=="停止") {                        clearInterval(time1);                        event.target.innerHTML="开始";                    } else{                        time1=setInterval(getTime1,1000);                        event.target.innerHTML="停止"                    }                },false);            }            let time0;            let time1;            window.addEventListener('load',init,false);        </script>    </head>    <body>        <section>        <p>一次性计时器（setTimeout( )）</p>        <div id="timeShow0"></div><br />        <button type="button" id="btn_stop0">停止</button>        <hr />        <p>间隔性计时器（setInterval( )）</p>        <div id="timeShow1"></div><br />        <button type="button" id="btn_stop1">停止</button>        </section>    </body></html>

运行结果：
这里写图片描述

阅读全文

0 0