javaScript定时器
一、持续执行函数
1.说明
setInterval(function(0{},time)
- 有唯一返回值 作为标识 作用：clearInterval使用
2.函数返回值
<script>
var timer = setInterval(()=>{
console.log("a")
},1000)
//每隔一千毫秒执行一次函数
//timer是函数返回值 是唯一的 用来清除定时器 如果不需要可以不写
console.log('返回值timer：'+timer)
</script>
返回值是唯一的 用于clearInterval函数使用
var time = 1000;
setInterval(()=>{
console.log("a")
},time) //这里time不会改变为2000
time = 2000
3.用变量形式传入参数
<script>
var time = 1000
var timer = setInterval(() => {
console.log("a")
}, time)
time = 2000
</script>
time只会读取一次 这里time不会变成2000ms
4.定时器到底准不准？
测试
<script>
var firstTime = new Date()
setInterval(()=>{
var lastTime= new Date().getTime();
console.log(lastTime-firstTime)
firstTime=lastTime;
},1000)
</script>
结论：setInterval是非常不准确的
理由：
- 因为js是轮换时间片执行 当程序把他放到执行队列后不知道什么时候会执行
- setInterval执行原理是红黑树
二、结束持续执行函数
1.说明
clearInterval(timer)
timer值由setInterval返回 是唯一的
2.例子
var time = 1000
var i = 0
var timer = setInterval(() => {
console.log(i++)
if(i>10){
clearInterval(timer)
}
}, 10)
三、延迟执行函数
1.说明
setTimeout(function(){},time)
- time单位也是毫秒
- 延迟执行只会执行一次
- 有唯一返回值 用于clearTimeout函数
2.例子
setTimeout(()=>{
console.log('a')
},1000)
只会执行一次
3.函数返回值
var timer = setTimeout(()=>{
console.log('a')
},1000)
var timer1 = setTimeout(()=>{
console.log('b')
},1000)
console.log(timer,timer1)
有唯一返回值
四、清除延迟执行函数
1.说明
clearTimeout(timer)
- timer由setTimeout返回
2.例子
var timer = setTimeout(()=>{
console.log('a')
},1000)
var timer1 = setTimeout(()=>{
console.log('b')
},1000)
clearTimeout(timer1)
五、window
四个方法全是window上的方法，内部函数this指向window
六、小案例
1.计时器
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
input {
border: 1px solid rgba(0, 0, 0, 0.8);
text-align: right;
font-size: 20px;
font-weight: bold;
}
style>
head>
<body>
minutes: <input type="text" value="0">
seconds: <input type="text" value="0">
body>
<script>
var minutesNode= document.getElementsByTagName("input")[0]
var secondsNode= document.getElementsByTagName("input")[1]
var minutes=0,
seconds=0;
var timer= setInterval(()=>{
seconds++;
if(seconds==60){
seconds=0
minutes++
}
secondsNode.value=seconds;
minutesNode.value=minutes;
if(minutes==3){
clearInterval(timer) //当达到3分钟时，停止计时
}
},10)
script>
html>
七、推荐的书籍
- 高性能javaScript
- 你不知道的js