定时器
所谓的“定时器”,指的是每隔一段时间就执行一次代码,在JavaScript中,对于定时器的实现,有以下2组方法:
setTimeout(),clearTimeout()
window
对象的setTimeout()
方法用于设置一个延时,即在多少毫秒之后执行指定的某个函数或某段代码。(一次性)
并且可以使用clearTimeout()
来取消执行setTimeout()
基本语法(启动定时器):
setTimeout("function();",delaytime);
// 定义一个变量 (timerId) 用于保存 setTimeout() 这个定时器,以便使用 clearTimeout(timerId) 来取消。
timerId = setTimeout("function();",delaytime);
结束(取消)定时器:
clearTimeout(timerId );
// 3秒后再console里打印一句xiaomo
setTimeout(function (){
console.log('xiaomo');
},3000);
function x(){
console.log('xiaomo');
}
setTimeout(x,3000);
// 开关灯
<div id="div1"></div>
<button type="button" id="btn1">开灯</button>
<script>
let oBtn=document.getElementById('btn1');
let oDiv=document.getElementById('div1');
//1.定义一个定时器的变量
let timer;
oBtn.onclick=function (){
oDiv.style.background='yellow';
//3.当多次执行时,先把上一次开着的定时器关掉,再往下执行开新的
clearTimeout(timer); //第一次执行时这还是个undefined,会自动忽略
//2.然后把(开)定时器里的内容存起来
timer=setTimeout(function (){
oDiv.style.background='#ccc';
},5000);
};
</script>
定时器有多次执行或者使用setInterval()时一定要先关再开!!!否则很容易出现一些不可预料的情况。
setInterval(),clearInterval()
setInterval()
的用法与setTimeout()
一样,区别仅仅在于setInterval()
指定某个任务每隔一段时间就执行一次(重复执行)
同样可以使用clearInterval()
来取消执行setInterval()
基本语法:
timerId = setInterval("function();",delaytime);
结束(取消)定时器:
clearInterval(timerId );
// 每隔1秒打印一次当前的时间戳
// 时间戳 ,从1970-1-1 00:00:00:000 到此时此刻的毫秒数
setInterval(function (){
console.log(Date.now());
},1000);
定时器每两次之间都会间隔,从开启定时器到第一次执行也有(定义了的延迟时间)间隔
setInterval(function,1000);
1s
第一次
1s
第二次
1s
第三次
1s
...
实例
<button type="button" id="btn1">发送短信</button>
<script>
let oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
this.disabled=true;
this.innerHTML='10秒后重发';
//设置一个倒计时变量
// let remain=10;
let remain=11;
function tick(){
//定时器每重复执行一次就减一
//方法一:这里默认的remain变量由于进来是就--了1,所以看到时就默认从9开始了,想要从10开始的话,就还要+1
remain--;
//这里用一个判断来对比一下倒计时变量,不然倒计时变量会走负数
if (remain>0){
oBtn.innerHTML=remain+'秒后重发';
}else{
clearInterval(timer);
// this.disabled=false;
// this.innerHTML='发送短信';
// 定时器里直接使用this的坑,会把this变成window
//console.log(this);
//console.log(this==window);
//当前的解决方案就是不去用它
oBtn.innerHTML='发送短信';
oBtn.disabled=false;
}
}
let timer=setInterval(tick,1000);
tick();
}
</script>