🏍️定时器
window对象给我们提供了两种定时器
🍇setTimeout() 超时定时器
setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行
window.setTimeout(调用函数,[延迟的毫秒数])；
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>// setTimeoutsetTimeout(function(){ // console.log('看我执行的时间'); },2000) //延迟单位是毫秒数functiontime(){ console.log('我执行了多久'); } vartimer=setTimeout(time,2000) // setTimeout('time()',2000) 不提倡这种写法</script></body></html>
总结：
1.window可以省略
2.调用函数可以直接写函数或函数名或采用字符串 '函数名()'三种形式。第三章不推荐
3.延迟的毫秒数默认是0，如果写必须是毫秒
4.定时器如果有很多的话需要给定时器赋值一个标识符
setTimeout()这个调用函数也称为回调函数，普通函数是按照代码顺序直接调用，而这个函数需要等待时间，时间到了才会去调用这个函数，因此称为回调函数。简单理解：回调就是回头调用的意思，上一件事干完再回头调用这个函数。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><imgsrc="./img1.jpg"><script>varimg=document.querySelector('img'); setTimeout(function(){ img.style.display='none'; },5000) </script></body></html>
🍈clearTimeout() 清除超时定时器
clearTimeout()取消了先前调用setTimeout()建立的定时器
window.clearTime(timeout ID)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><button>阻止按钮</button><script>vartime=setTimeout(function(){ console.log('快阻止我吧'); },4000) varbtn=document.querySelector('button'); btn.addEventListener('click',function(){ clearTimeout(time); }) </script></body></html>
注意 ：
1.window可以省略
2.里面的参数就是定时器的标识符
🍉setInterval() 间隔定时器
setInterval()方法反复调用一个函数，每隔这个时间就去调用一次回调函数。
window.setInterval(回调函数,[间隔的毫秒数])
<script>setInterval(function(){ console.log('我会间隔执行哦'); },2000) </script>
倒计时案例
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>span{ background-color: #000;display: block; float: left; margin-right: 10px; margin-top: 300px; width: 40px; height: 40px; color: #fff;text-align: center; line-height: 40px; } .hour{ margin-left: 45%; } </style></head><body><div><spanclass="hour">1</span><spanclass="mintue">2</span><spanclass="second">3</span></div><script>// 1.获取元素varhour=document.querySelector('.hour'); varmintue=document.querySelector('.mintue'); varsecond=document.querySelector('.second'); varinputTime=+newDate('2022-7-27 18:00:00'); // 返回的是用户输入时间的总的毫秒数// 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白countDown();//我们先调用这个函数，防止第一次刷新页面有空白// 2.开启定时器setInterval(countDown,1000) functioncountDown () { varnowTime=+newDate(); // 返回的是当前时间总的毫秒数vartimes= (inputTime-nowTime) /1000; // time是剩余时间总的秒数varh=parseInt(times/60/60%24); //计算小时h=h<10?'0'+h : h; hour.innerHTML=h;//把剩余的小时给 黑色的小时盒子varm=parseInt(times/60%60); //计算分数m=m<10?'0'+m : m; mintue.innerHTML=m; vars=parseInt(times%60); //计算当前秒数s=s<10?'0'+s : s; second.innerHTML=s; } </script></body></html>
🍊clearInterval() 清除间隔定时器
clearInterval()方法取消了先前调用setInterval()建立的定时器。
window.clearInterval(interval ID)
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><buttonclass="begin">开启定时器</button><buttonclass="stop">关闭定时器</button><script>varbegin=document.querySelector('.begin'); varstop=document.querySelector('.stop'); vartimer=null;//全局变量begin.addEventListener('click',function(){ timer=setInterval(function(){ console.log('我在执行哦'); },1000) }) stop.addEventListener('click',function(){ clearInterval(timer) }) </script></body></html>
总结
setTimeout和setInterval的区别：
setTimeout：延时时间到了就去执行回调函数，只调用一次就结束这个定时器
setInterval：每隔这个延时时间就去调用回调函数，会重复调用这个回调函数
