深刻理解js内置计时器

你的名字 2022-03-26 10:26 189阅读 0赞

> 计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系，它是实现这些的核心语法，如何一次深刻理解js计时器？往下看你就知道，有惊喜哦！

js计时器有两种，一种为延时后单次的执行，另一种为延时多次执行。通过函数的递归，前者也可以打破壁垒，拥有循环执行的功能。

### setTimeout(  javascript语句  , 毫秒);  ###

（其中第一个值可以是一个函数  需要加" "，也可以是代码）

//延迟一段时间 执行 执行一次

###  setInterval("javascript语句"  , 毫秒); ###

（其中第一个值可以是一个函数  需要加" "，也可以是代码）

//循环执行

具体实例 （一些细节和具体的用法还是在案例代码中便于理解）

<!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>
        </head>
    
    <body>
        <button id="none">停止计时器</button>
        <button id="start">开始计时器</button>
        <script>
            // 有两个计时器
            // setTimeout();
            // 延迟一段时间 执行 执行一次
            // setInterval();
            // 循环执行
            var stoptime=document.getElementById('none');//默认从零开始自加 获取开始按钮
            var starttime=document.getElementById('start');//获取停止按钮
            var count=0;
            var timecount;
            // 第一种
            /*showtime();
            function showtime(){
                count++;
                console.log(count);
                timecount=setTimeout('showtime()',1000);//延时一秒
            }//利用递归来实现循环时间
            stoptime.onclick=function(){//停止计时器
                clearTimeout(timecount);//将计时器清除，即停止自加
            }
            starttime.onclick=function(){//开始计时器
                timecount=setTimeout('showtime()',1000);//继续开始自加
            }*/
    //优点：重启计时器简单，由于是原本是单次执行，只需将之前的递归函数重新复制即可 缺点：需要递归调用
            // 第二种
            showtime();
            function showtime(){//封装函数
                timecount=setInterval(function(){
                    count++;
                    console.log(count);
                },1000)
            }
            stoptime.onclick=function(){
                clearInterval(timecount);
            }
            starttime.onclick=function(){
                showtime();
            }
    //优点：不需要递归调用，直接实现循环。缺点：重启较复杂，需要调用所有函数，建议封装函数。
        </script>
    </body>
    
    </html>

惊喜！