计时器和延时器的应用
延时器
延时器：延迟固定的时间执行特定的操作 => 默认只执行一次（每次执行完默认会被清除，可以理解为是一个特殊的计时器）
设置延时器：setTimeout(callback,interval,arg1,arg2,...argN);
callback 延迟固定的时间,执行特定的操作(回调函数)
interval 延迟时间(单位:ms)
arg1,arg2,...argN 如果回调函数需要接收参数,从第三参数开始依次向后传
返回值：延时器的编号（number）
清除延时器：clearTimeout(延时器编号)
作用：
1.清除正在执行的延迟操作（这时回调函数还没有调用）
2.延时器改计时器（利用递归）
计时器
=> 每隔固定的时间，执行特定的操作（回调函数 => 提前决定好要执行的内容，每隔指定时间执行）
setInterval(callback,interval,arg1,arg2,...argN);
参数：
callback 每隔固定的时间执行特定的操作（回调函数）
interval 间隔时间（ms）
arg1,arg2,...argN 如果回调函数需要接收参数，从第三参数开始依次向后传
返回值：计时器的编号（number）
清除计时器：clearInterval（生成计时器时对应的编号）（清除后的计时器无法再次启动，只能重新创建一个新的）
//HTML代码
<body>
<button class="btn">按钮</button>
</body>
//JS代码
// 计时器 嵌套 计时器
// 问题：如果外层间隔时间小于内层，则外层不会等待内层停止会直接开启下一层
// 期望: 外层计时器等待内层执行完毕在开启下一次 (延时器改计时器 => 递归调用自身)
var button = document.getElementsByClassName("btn")[0];//绑定按钮
var timer1 = null;//定义整个倒计时过程的延迟变量
var timer2 = null;//定义间隔时间
// debugger;
function timeDown(){
clearTimeout(timer1);//在每一次开始前清除之前延时器的可能影响
//延时器，用于等待一轮计时完成到下一轮，每次一轮计时都会延迟5秒
timer1 = setTimeout(function(){
console.log("倒计时开始：");
var count = 5;//计数号
console.log("倒计时5s：",count);
//计时器，间隔一秒计数一次
timer2 = setInterval(function(){
count--;
console.log("倒计时5s：",count);
if(count == 1){
clearInterval(timer2);
console.log("倒计时结束");
timeDown();
//等count减到1时继续递归执行整个流程
}
},1000);
},5000);
}
timeDown();
//定义按钮点击事件，点击按钮后结束计时
button.onclick = function(){
clearTimeout(timer1);
clearInterval(timer2);
}
实现结果：
上一次的计时结束到下一轮的计时开始之间都会等待五秒钟，点击页面的按钮后会结束计时。
浙公网安备 33010602011771号