js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval

陌一一

4438人浏览 · 2022-10-13 18:03:01

陌一一 · 2022-10-13 18:03:01 发布

1、定时器介绍

在js里面，有两种定时器：倒计时定时器和间隔定时器

（1）倒计时定时器：倒计时多长时间以后执行函数

语法：setTimeout（要执行的函数，多长时间以后执行）

  <script>
        //倒计时计时器
        var timerId = setTimeout(function(){
            console.log("yiyi")
        }, 1000)
        console.log(timerId)
  </script>

重点：

①1000就是倒计时的毫秒数，单位是毫秒，1000ms=1s，所以会在页面打开1秒钟以后执行函数；

②只执行一次，就不执行了；

③返回值是，当前这个定时器是页面中的第几个定时器；

（2）间隔计时器：间隔一定时间输出一次，一直执行

语法：setInterval（要执行的函数，间隔执行时间）

  <script>
        //间隔计时器
        var timerId = setInterval(function(){
            console.log(new Date())
        }, 2000)
        console.log(timerId)
  </script>

结果：间隔2s输出当前时间

重点：

①2000是间隔时间，单位ms，在页面加载2s后第一次输出...

②没遇见让停止的代码时，就一直执行；

③返回值是，当前这个定时器是页面中的第几个定时器；

2、清除定时器

清除倒计时定时器：

clearTimeout(timeId)

清除间隔定时器：括号里面是定时器的名称

clearInterval(timeId)

小案例：配合按钮实现清除定时器

需求：点一个按钮就清除这个定时器

<body>
    <button id="btn1">清除定时器-延时</button>
    <button id="btn2">清除定时器-间隔</button>
    <script>
        //倒计时计时器
        var time1 = setTimeout(function(){
            console.log("yiyi")
        }, 1000)
        console.log(time1)

        //间隔计时器
        var time2 = setInterval(function(){
            console.log(new Date())
        }, 2000)
        console.log(time2)
        console.log(btn1,btn2) //直接通过id，拿到按钮对象

        btn1.onclick = function(){
            console.log("btn1 click")

            clearTimeout(time1)
        }
        btn2.onclick = function(){
            console.log("btn2 click")

            clearInterval(time2)
        }
    </script>
</body>

注意：这里的script标签必须放在body标签里，而且是放在button标签后面，不能放在head里面，不然会报错，因为代码是从上到下执行的，你要是放在head里面或者是button前面了，你在script里面用的button时候，这个标签都没定义，你怎么用呀。

解释说明：清除定时器配合按钮，需要构建一个函数，函数前面是：id选择器名称.onclick（添加一个点击事件）

3、同步和异步

重点：

①同步执行完、异步才能执行；有些同步是死循环，那么异步就永远执行不了

②我们一般的代码都是同步执行，异步的有我们这节学的setTimeout和setInterval的回调函数

③所以定时器里面的代码要等它上下的同步执行完了，它才能执行

  <script>
        console.log("11111")
        setTimeout(function(){
            console.log("yiyi")
        },1000)
        console.log("22222")
  </script>