js定时器setTimeout、clearTimeout、setInterval使用和区别

爬楼梯的小新

已于 2022-02-05 23:01:21 修改

阅读量1.5k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-02-05 21:37:51 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122793593

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

setTimeout(调用函数，[延迟的毫秒数])；

用于设置一个定时器该定时器在定时器到期后执行调用函数

案例：3秒后显示log打印结果

    <script>
        //方法一
        // setTimeout(function() {
        //     console.log('到时间了');
        // }, 3000);

        //方法二 调用函数的方式
        function back() {
            console.log('niho');
        }
        setTimeout(back, 3000)
    </script>

如果一个页面有多个定时器为了区分可以给定时器设置一个变量名即可

    <script>
        //方法一
        // setTimeout(function() {
        //     console.log('到时间了');
        // }, 3000);

        //方法二 调用函数的方式
        function back() {
            console.log('niho');
        }
        var time1 = setTimeout(back, 3000)
        var time2 = setTimeout(back, 5000)
    </script>

clearTimeout() 停止定时器

括号里写的是定时器的名字

案例：点击按钮停止定时器不再执行此定时器

<body>
    <button>停止定时器</button>

    <script>
        var btn = document.querySelector('button')
        var timer = setTimeout(function() {
            console.log('我要爆炸了');
        }, 5000);
        btn.onclick = function() {
            clearTimeout(timer)
        }
    </script>
</body>

setInterval(调用函数，[延迟的毫秒数])

与setTimeout的区别是 这个是每间隔几秒就会执行一次函数会调用很多次 重复调用这个函数

   <script>
        setInterval(function() {
            console.log('重复调用');
        }, 3000);
    </script>

clearInterval() 清除定时器

这个是清除重复调用的定时器就是上面那个setInterval

案例：

注意：1、setInterval定时器是重复调用的所以是用addEventListener监听器

2、下面的变量timer不能直接在监听器里声明在函数内部声明是局部变量下面的关闭函数会获取不到这个变量显示timer会定义所以把timer定义为null 意思设置为一个空对象然后把定时器赋值给这个timer空对象

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">关闭定时器</button>

    <script>
        var begin = document.querySelector('.begin')
        var stop = document.querySelector('.stop')
        var timer = null; //null 意思存放的是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('开始了');
            }, 1000)
        })
        stop.addEventListener('click', function() {
            clearInterval(timer)
        })
    </script>
</body>