JS | 定时器以及“点名案例”

目录

setTimeout()

setInterval()

“点名”案例

---

window对象给我们提供了2个非常好用的方法——定时器。

• setTimeout()

• setInterval()

下面我们就来学习一下，怎么使用这两个定时器吧~

• window.setTimeout(调用函数，[延迟的毫秒数])   设置定时器

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

这个调用函数我们也称为回调函数 callback。普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。

以前我们讲的element.onclick = function(){} 里面的函数也是回调函数。

注意：

1. window可以省略。
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名'三种形式。第三种不推荐。
3. 延迟的毫秒数可以省略，默认是0；如果写，必须是毫秒。
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

• window.clearTimeout(timeout ID)   取消定时器

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。

注意：

1. window可以省略
2. 里面的参数就是定时器的标识符。  

 

---

•  window.setInterval(回调函数，[间隔的毫秒数])

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。 

注意：

1. window可以省略。
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名'三种形式。第三种不推荐。
3. 延迟的毫秒数可以省略，默认是0；如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

 

•  window.clearInterval(timeout ID)   取消定时器

注意：

1. window可以省略
2. 里面的参数就是定时器的标识符。  

 

---

“点名”案例

接下来我们利用刚刚介绍的定时器来写一个“点名”的小案例，老规矩，我们先来看一下效果图：

当我们点击Start按钮时，名字每隔0.1s变化一次，并且按钮从Start变成了Stop；当我们再一次点击Stop按钮时，div框中的名字就停止了变化。这个我们应该怎么实现呢？我们接着往下看。

HTML: 

    <div class="name"></div>
    <button>Start</button>

HTML结构很简单，就一个div和一个button按钮，div用来显示同学的名字，而按钮用来控制开始与停止。

JS:

   <script>
        var n = document.querySelector('.name')
        var btn = document.querySelector('button')
        var arr=['王仕丹','李嘉莹','王坚','陈浩然','姚辰宇','何政汉','陈全宏','汪海龙','孙富 
        贵','樊明辉','朱静远','吴纪伟','鲍风雨','胡海龙']
        var timer = null
        var num=0
        btn.onclick = function(){
            num += 1
            if(num%2 == 0){
               clearInterval(timer)
               btn.innerHTML = 'Start'
            }else{
                timer = setInterval(() => {
                n.innerHTML = arr[Math.floor(Math.random()*arr.length)]
                }, 100)
                btn.innerHTML = 'Stop'
            }
            
        }
    </script>

我们需要注意的点有以下几个：

1. 在定义标识符的时候，我们要点击函数的外面，不然外面会访问不到而报错
2. 在添加定时器时，需要把上一个的定时器清除掉，不然会开启多个定时器

关于定时器的内容今天就说这么多，拜比~