JavaScript定时器setTimeout和setInterval()以及清除定时器

我就是我 2022-12-25 11:53 272阅读 0赞

# JavaScript定时器setTimeout和setInterval #

window对象提供了两种好用的计时器：setTimeout()和setInterval()

### setTimeout()定时器 ###

window.setTimeout(调用函数，[延迟的毫秒数])；//window在调用时可以省略

延迟时间的单位是毫秒，可以省略，默认为0，立即执行函数。

setTimeout()用于设置一个定时器，该定时器到期后执行调用函数。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定时器</title>
    </head>
    <body>
        <script>
            //写一个定时器，时间到了之后输出“定时器时间到了”
            setTimeout(function(){
         
                console.log('定时器时间到了');
            },5000)
            //也可以使用调用函数的方式
            function ti(){
         
                console.log('调用函数定时器时间到了');
            }
            setTimeout(ti,8000);
        </script>
    </body>
    </html>

执行程序，在5秒后输出定时器时间到了，在8秒后输出调用函数定时器时间到了

![在这里插入图片描述][20201201182949919.png_pic_center]

页面中会有很多的定时器，通常需要给定时器加一个标识符。

var timer1 = setTimeout(ti,3000);
    var timer2 = setTimeout(ti,5000);

通过定时器可以设置广告几秒后自动关闭的效果。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>5秒后关闭广告</title>
    </head>
    <body>
        <img src="image/ad.jpg" alt="" class="ad">
        <script>
            
            var ad = document.querySelector('.ad');
            setTimeout(function(){
         
                ad.style.display = 'none';
            },3000)
        </script>
    </body>
    </html>

### 停止setTimeout()计时器 ###

在一些特殊情况下，我们需要停止计时器

window.clearTimeout(timeoutID);

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定时器</title>
    </head>
    <body>
        <img src="image/ad.jpg" alt="" class="ad">
        <button>点击停止计时器</button>
        <script>
            var ad = document.querySelector('.ad');
            var timer = setTimeout(function(){
         
                ad.style.display = 'none';
            },3000)
    
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
         
                clearTimeout(timer);
            })
        </script>
    </body>
    </html>

加载网页后，会出现一张图片，三秒后消失，旁边有一个按钮“点击停止计时器”，点击这个按钮，3秒后，图片不会消失

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

### setInterval()定时器 ###

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定时器</title>
    </head>
    <body>
    
        <script>
            //setInterval()定时器
            var a =0;
            setInterval(function() {
         
                a++;
                console.log('输出第'+a+'次');
            }, 1000);
        </script>
    </body>
    </html>

加载网页，没隔1秒就会输出一次。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]

setTimeout()方法，时间到了之后调用回调函数，调用一次之后结束定时器，但是setInterval()方法，每隔一个延时的时间就会去调用回调函数，会一直重复。

### 清除定时器clearInterval() ###

window.clearInterval(intervalID);

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>定时器</title>
    </head>
    <body>
    
        <button class="begin">开启定时器</button>
        <button class="stop">停止定时器</button>
        <script>
    
            //清除定时器
            var begin = document.querySelector('.begin');
            var stop = document.querySelector('.stop');
            var timer = null;
            begin.addEventListener('click',function(){
         
                timer = setInterval(function()  {
         
                    console.log('你好');
                }, 1000);
            })
            stop.addEventListener('click',function(){
         
                clearInterval(timer);
            })
        </script>
    </body>
    </html>

[20201201182949919.png_pic_center]: /images/20221120/679caf2fd557489da70cf229ddeeaaac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201201183006957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201201183027610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA==,size_16,color_FFFFFF,t_70#pic_center