定时器

231 阅读1分钟

「这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战」 。

在JavaScript中有两个定时器,一个只执行一次,用完即销毁,一个是每隔那个时间段,就执行一次

  • 第一个定时器: setTimeout() :在指定的毫秒数后调用函数或计算表达式。
语法:setTimeout(code,millisec,lang)
setTimeout(function() {
                    要执行的函数体
                }, 时间);

(1)这个定时器只可以用一次,我给它起了个很记的名字,叫日抛定时器,用完即扔

(2)定时器里面的时间是毫秒数。里面可以填的最快速度是20ms,如果不填,则默认20ms.但如果写了比20ms小的时间,则,不会执行这个时间的,它还是以20ms来处理这个定时器。 时间没有单位哦

清除定时器:

clearTimeout(定时器的名字)
  • 第二个定时器:setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
语法: setInterval(code,millisec,lang)
 let time2 = setInterval(function() {
           要执行的函数体

        }, 时间);
        

(1)这个定时器是每隔那个时间段,就调用一次里面函数 (2)里面的时间和第一个函数体一样,里面填的是毫秒数最快速度只有20ms,时间没有单位

   适用场景:倒计时,轮播图等,需要每隔一段时间就变化的场景

清除定时器: clearInterval(定时器的名字) 给大家一个例子方便直到如何使用:

<script>
        // 一次定时器
        document.querySelector('.start').onclick = function() {
                let time = setTimeout(function() {
                    alert('爆炸啦')
                }, 3000);
            }
        document.querySelector('.end').onclick = function() {
                     clearTimeout(time)
            }
            // 循环调用的定时器
        let time2 = setInterval(function() {
            document.querySelector('p').innerText++

        }, 1000);
        // 当结束的按钮被点击的时候
        document.querySelector('.end').onclick = function() {
            // 清除定时器time2
            clearInterval(time2)
        }
    </script>