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

  • Post author:
  • Post category:其他




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>



版权声明:本文为weixin_57607714原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。