JavaScript定时器-CFANZ编程社区

JavaScript定时器

定时器分为两种：
间隔定时器和延时定时器

间隔定时器：

按照指定周期（毫秒）去执行指定的代码
语法：setInteral（函数，时间）

延时定时器

在固定的时间（毫秒）后指定一次代码

 <script>
        /* 间隔定时器：
        语法：setInteral（函数，时间）
        函数：每次要执行的内容
        时间：单位是毫秒
        */
        // 书写一个定时器
        setInterval(function() {
            console.log('执行一次')
        }, 1000);
        /* 延时定时器：
        语法：setTimeout（函数，时间）
        函数：时间到达执行的内容
        时间：单位是毫秒
        */
       setTimeout(function() {
        console.log('执行一次')
       }, 1000);
    </script>

定时器的返回值

不区分定时器种类
表示是当前页面的第几个定时器

<script>
        /* 定时器返回值
        不区分定时器种类
	    表示是当前页面的第几个定时器 */
        var timer1 = setInterval(function () {}, 1000)
        var timer2 = setTimeout(function () {}, 1000)
        console.log('timer1:', timer1)
        console.log('timer2:', timer2)
    </script>

关闭定时器

不区分定时器的种类
语法一：clearInterval（要关闭的定时器返回值）
语法二：clearTimeout（要关闭的定时器返回值）

<body>
    
    <button id="close">关闭定时器</button>
    <script>
        /* 关闭定时器：（不区分定时器种类）
         语法一：clearInterval（要关闭的定时器返回值）
		语法二：clearTimeout（要关闭的定时器返回值） */
        var time1 = setInterval(function () {
            console.log('间隔定时器')
        }, 1000)
        var time2 = setTimeout(function () {
            console.log('延时定时器')
        }, 3000)
        var close = document.getElementById('close')
        close.onclick= function() {
            // 关闭定时器（不区分定时器种类，使用哪一种语法都可以关闭）
            // clearInterval(time1)
            // clearInterval(time2)
            clearTimeout(time1)
            clearTimeout(time2)

        }
    </script>
</body>

0 条评论