使用场景：间隔性地自动执行代码，倒计时
分类：间歇函数、任务函数
间歇函数
！！！！ 为异步任务，不阻塞主线程
语法：
setInterval(function,millise,lang)
参数：
function执行函数语句，millise毫秒间隔数，lang可选的语言环境
function不需要加（），setInterval()返回的是一个id数字，
操作对象：为window的定时器容器，类似于window.sessionStorage.getItem
id为定时器容器中的子元素----执行函数对象的索引下标
关闭定时器：
clearInterval(var)
PS：clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值，但已声明的句柄不会消除，需要垃圾回收机制和手动清除
//data接收的是id参数，typeof为number
let data = setInterval(fun,millise)
//clearInterval是停止容器内函数的执行，并不是清除该子元素
clearInterval(data)
PS: 计时器相当于一次线程，需要等待主线程任务完成后再开始执行
延迟执行函数
setTimeout(){
//执行体
}
实现案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 700px;
height: 320px;
margin: 100px auto;
position: relative;
cursor: pointer;
}
p {
position: absolute;
left: 0;
bottom: 0;
line-height: 50px;
background-color: #666;
color: #fff;
width: 100%;
padding-left: 10px;
font-size: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="./images/b01.jpg" alt="" />
<p>第1张图片</p>
</div>
<script>
console.log(document.getElementsByClassName('iaaa'));
//获取元素
let imgData = document.querySelector('img')
let pData = document.querySelector('p')
let divData = document.querySelector('div')
let picAdr = ['./images/b01.jpg', './images/b02.jpg', './images/b03.jpg', './images/b04.jpg', './images/b05.jpg', './images/b06.jpg', './images/b07.jpg', './images/b08.jpg', './images/b09.jpg']
//默认图片索引,0-8
let picIndex = 1
//设置间隔执行函数
function timeDecrease() {
//判断间隔结束标志
if (picIndex < picAdr.length) {
console.log(`第${picIndex}`);
//设置img的src值
imgData.src = `${picAdr[picIndex]}`
pData.innerText = `第${picIndex + 1}张图片`
picIndex += 1
} else {
//置0
picIndex = 0
}
}
//设置间隔函数
let interVal = setInterval(timeDecrease, 10000);
//鼠标进入停止函数
function onmouseoverE(){
console.log('成功停止',picIndex);
// 停止间隔
//clearInterval是停止定时器容器内的执行对象，不是清除，interVal不变依然为id：1
clearInterval(interVal);
}
//鼠标离开继续函数
function onmouseoutE(){
console.log('继续事件');
//如何继续函数，
interVal = setInterval(timeDecrease, 1000)
// let interVal = setInterval(timeDecrease, 1000);
}
//设置块鼠标进入事件
imgData.addEventListener("mouseover",onmouseoverE)
// divData.addEventListener('onclick',onmouseoverE)
//设置鼠标离开事件
imgData.addEventListener("mouseout",onmouseoutE)
</script>
</body>
</html>
\
