定时器
js中内置的一个方法
作用
每隔一段时间或者延迟一段时间就执行一段指定的代码
定时器的分类
重复执行定时器
setInterval()
作用
每隔一段时间就会重复执行指定的函数
语法
setInterval(function(){
代码
},时间）
参数
要执行的函数:时间到了就会执行
时间：间隔的时间
单位：毫秒
1s=1000ms
<style>
#box{
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 50px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
var i=0;
box.onclick=function(){
setInterval(function(){
box.innerHTML=i;
i++;
},1000);
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
<style>
#box{
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 50px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
var i=0;
box.onclick=function(){
setInterval(change,1000);
//函数在外面定义，这里调用需要用函数名，没有括号（）
};
function change(){
i++;
box.innerHTML=i;
}
};
</script>
</head>
<body>
<div id="box"></div>
</body>
延迟执行定时器
setTimeout()
作用：延迟执行定时器执行指定函数，只执行一次
语法
setTimeout(function(){
代码
},时间);
参数
要执行的函数：当时间到达后会执行这个函数
时间：延迟时间
代码和重复执行定时器很相似
<style>
#box{
width: 100px;
height: 100px;
border: 1px solid red;
font-size: 50px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
var i=0;
box.onclick=function(){
setTimeout(function(){
i++;
box.innerHTML=i;
},1000);
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
定时器里的this指向
定时器的this指向window的，因为定时器是window身上的一个方法，所以this指向window
<style>
#box{
width: 100px;
height: 100px;
border:1px solid #f00;
}
</style>
<script>
window.onload=function(){
var box=document.getElementById("box");
var i=0;
console.log(this); //window
box.onclick=function(){
console.log(this); //box
var This=this;//把box存给This，函数内部可以调用
setInterval(function(){
console.log(this); //window
i++;
box.innerHTML=i;
},1000);
};
}
</script>
</head>
<body>
<div id="box"></div>
</body>
清除定时器
定时器的编号
定时器的一个返回值，返回一个数字，代表当前定时器的编号，我们可根据这个来清除定时器
它返回的编号在不同的浏览器里面是不同的，所以没办法直接拿编号去清除定时器
清除定时器的方法
1.清除重复执行定时器
clearInterval(定时器的返回值）
可以声明一个变量，把定时器的返回值都存到这个变量里，然后拿这个变量去清除定时器
<style>
#box{
width: 100px;
height: 100px;
border:1px solid #f00;
}
</style>
<script>
var n=0;
function add(){
n++;
console.log(n);
//清除定时器的条件一般会放在定时器执行的函数里
if(n==8){
//clearInterval(1);
clearInterval(timer);
}
}
var timer=setInterval(add,1000);
// console.log(setInterval(add,1000)setInterval(add,1000));//1
// setInterval(add,1000);
//定时器在走的过程中，下面代码也会走
alert(1);
if(n==8)
</script>
</head>
<body>
<div id="box"></div>
</body>
1.直接把定时器调用放在一个变量赋值的后面，定时器会走吗？
timer使用的时候，定时器已经跑了八次了，页面代码已经跑完了
var timer=setInterval(add,1000);
2.这个timer是在下面声明的，而使用是在上面，可以用到嘛？
2.清除延迟执行定时器
clearTimeout （定时器的返回值）
标签：
javascript
前端
本文转载自: https://blog.csdn.net/weixin_55355282/article/details/126998517
版权归原作者 隐藏用户y 所有， 如有侵权，请联系我们删除。
版权归原作者 隐藏用户y 所有， 如有侵权，请联系我们删除。