定时器
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 （定时器的返回值）