定时器的简介
setInterval()
定时调用，可以将一个函数，每隔一段时间执行一次
参数：
回调函数，该函数会每隔一段时间被调用一次
每次调用间隔的时间，单位是毫秒
返回值：返回一个Number类型的数据，这个数字用来作为定时器的唯一标识。
clearInterval()
此方法需要一个定时器标识作为参数，这样来关闭对应的定时器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器简介</title>
<script>
window.onload = function () {
var count = document.getElementById("count");
var num = 1;
var timer = setInterval(function () {
count.innerHTML = num++;
if (num == 11) {
clearInterval(timer)
}
}, 1000)
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>
切换图片练习
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器练习</title>
<script>
window.onload =function (){
//获取img1标签以便修改它的src属性，来达到换图片的效果
var img1 =document.getElementById("img1");
//将图片封装到数组里，方便我们切换图片
var imgArr =["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"];
//数组下标索引
var index =0;
//定义定时器的标识，以便关闭定时器，
// 如果你不在这里定义，而在按钮1中定义的话，按钮二范围内，它看不到这个标识
var timer;
//为butt1绑定单击响应函数
var butt1 =document.getElementById("butt1");
butt1.onclick =function (){
/**
* 目前，我们每点一次按钮，就会开启一个定时器
* 点击多次就会开启多个定时器，这就导致图片切换的速度过快
* 并且我们只能关闭最后一次定时器
*/
//在开启定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
//开启一个定时器来自动切换图片
timer =setInterval(function (){
index++;
index =index%imgArr.length;//判断所以是否超过最大索引，将其置为0
//修改img1的src属性，达到切换效果
img1.src =imgArr[index];
},1000);
};
var butt2 =document.getElementById("butt2");
//为bttu2绑定一个单击响应函数
butt2.onclick =function (){
/*
clearInterval()可以接受任意参数
如果参数是一个有效的定时器的标识，则关闭该定时器
如果参数不是一个有效的标识，则什么也不做，也不会报错
*/
clearInterval(timer);
}
}
</script>
</head>
<body>
<img src="./img/1.jpg" alt="图片" id="img1">
<br/><br/>
<button id="butt1">开始</button>
<button id="butt2">暂停</button>
</body>
</html>
修改div移动练习
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘移动div改进</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
border: solid;
position: absolute;
}
</style>
<script>
window.onload = function () {
var speed =10;
var dir =0;
//开启一个定时器来控制它移动的速度，不管它的方向，让onkeydown来只控制方向
setInterval(function (){
switch (dir) {
case 37:
box.style.left = box.offsetLeft - speed + "px";
break;
case 38:
box.style.top = box.offsetTop - speed + "px";
break;
case 39:
box.style.left = box.offsetLeft + speed + "px";
break;
case 40:
box.style.top = box.offsetTop + speed + "px";
break;
}
},30)
var box = document.getElementById("box");
document.onkeydown = function (event) {
event = event || window.event;
var speed = 10;
if (event.ctrlKey) {
speed = 50;
}
dir =event.keyCode;
};
document.onkeyup =function (){
dir =0;
speed =10;
}
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
延时调用
延迟调用：setTimeout()
延迟调用一个函数不马上执行，而是隔一段时间后再执行，而且只会执行一次
延迟调用和定时调用的区别：
- 延迟调用只会执行一次，而定时调用会执行多次
- 延迟调用和定时调用实际上可以互相代替，在开发中可以根据自己的需求去选择
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟调用</title>
<script>
window.onload =function (){
var num =1;
var timer =setTimeout(function (){
console.log(num++);
},5000)
//使用clearTimeout来关闭一个延迟调用，因为这里关闭了，使用1不会出来
clearTimeout(timer);
};
</script>
</head>
<body>
</body>
</html>