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

最新推荐文章于 2024-03-29 16:23:23 发布

我是Dreamer啊

最新推荐文章于 2024-03-29 16:23:23 发布

阅读量1k

点赞数 3

分类专栏：前端开发文章标签： javascript js

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/110443362

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

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秒后输出调用函数定时器时间到了

在这里插入图片描述

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

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秒后，图片不会消失

在这里插入图片描述

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秒就会输出一次。
在这里插入图片描述

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>

我是Dreamer啊

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript定时器setTimeout和setInterval()以及清除定时器

JavaScript定时器setTimeout和setIntervalwindow对象提供了两种好用的计时器：setTimeout()和setInterval()setTimeout()定时器window.setTimeout(调用函数，[延迟的毫秒数])；//window在调用时可以省略延迟时间的单位是毫秒，可以省略，默认为0，立即执行函数。setTimeout()用于设置一个定时器，该定时器到期后执行调用函数。<!DOCTYPE html><html lang="zh-
复制链接

扫一扫

专栏目录