目录
window对象给我们提供了2个非常好用的方法——定时器。
setTimeout()
setInterval()
下面我们就来学习一下，怎么使用这两个定时器吧~
- window.setTimeout(调用函数，[延迟的毫秒数]) 设置定时器
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
这个调用函数我们也称为回调函数 callback。普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
以前我们讲的element.onclick = function(){} 里面的函数也是回调函数。
注意：
- window可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名'三种形式。第三种不推荐。
- 延迟的毫秒数可以省略，默认是0；如果写，必须是毫秒。
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
- window.clearTimeout(timeout ID) 取消定时器
clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器。
注意：
- window可以省略
- 里面的参数就是定时器的标识符。
- window.setInterval(回调函数，[间隔的毫秒数])
setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
注意：
- window可以省略。
- 这个调用函数可以直接写函数，或者写函数名或者采取字符串'函数名'三种形式。第三种不推荐。
- 延迟的毫秒数可以省略，默认是0；如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
- 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
- window.clearInterval(timeout ID) 取消定时器
注意：
- window可以省略
- 里面的参数就是定时器的标识符。
“点名”案例
接下来我们利用刚刚介绍的定时器来写一个“点名”的小案例，老规矩，我们先来看一下效果图：
当我们点击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>我们需要注意的点有以下几个：
- 在定义标识符的时候，我们要点击函数的外面，不然外面会访问不到而报错
- 在添加定时器时，需要把上一个的定时器清除掉，不然会开启多个定时器
关于定时器的内容今天就说这么多，拜比~