前端基础(十三)_定时器（间歇定时器、延迟定时器）

定时器

定时器共两种，setInterval及setTimeout：
1、setInterval：重复执行或者叫间歇执行，即隔某个时间就执行一次
2、setTimeout：延迟执行，延迟某个特定的时间开始执行，只执行一次
语法：

setTimeout(函数, 间隔时间（单位毫秒）)
setInterval(函数, 间隔时间（单位毫秒）)

1）setTimeout

setTimeout 是隔特定时间执行一次且只执行一次。
例1：setTimeout 隔一段时间后打印数字+1

setTimeout(function(){
    
    console.log(666)},100)

下面的5752是间歇定时器的ID，后续取消定时器执行的时候会用到。

取消定时器的执行：

clearTimeout(定时器的ID)

2）setInterval

setInterval，每隔指定的时间就调用一次函数。
例2：setInterval 在窗口打印数字

setInterval(function(){
    
    console.log(888)},5000)

每隔五秒打印一次，不取消定时器不会自动停止。
上面代码中，通过定时器，可以隔五秒就调用一次函数。

取消定时器的执行：

clearInterval(定时器的ID)

3）清除定时器clear

定时器一旦开启，就不会自动停止，假设我们现在要做一个倒计时10-0，那么当他到0的时候，是不是就应该停止当前的定时器，停止定时器我们需要使用clear，不同的定时器有不同的清除方式：
1、clearInterval(intervalId)
2、clearTimeout(intervalId)
intervalId是一个number数值，开启定时器时会返回一个能唯一标识当前定时器的id。如：var id = setInterval(function(){},1000),一般从1开始。
例 1：当变量s为0时，停止时间函数。

but.onclick = function () {
    
    
	var s = 60;
	// 返回 id 唯一能够标识当前定时器的
	var timer = setInterval(function () {
    
    
		s--;
		if(s === 0){
    
    
			clearInterval(timer);// 关闭定时器
		} 
		p.innerHTML = s;
		},1000)
};