JS的定时器
JS中的定时器有两种,分别是Interval和setTimeout。
1 Interval的开启和关闭
-
开启setInterval(函数,时间)
按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。换句话说,创建定时器的每隔指定时间就自动调用指定的函数,返回一个定时器对象。案例1:隔1秒打印一个hello,world
num=1 //此处函数叫匿名函数 t1=setInterval(function(){ console.log('hello,world'+num) num++ },1000)
效果如图:
案例2:创建一个小盒子,使小盒子匀速移动
这是创建盒子代码,并给盒子一些样式方便观察,写在body里面。<div id="box" style="background-color: green;width: 80px;height: 80px;position: absolute;top: 10px;"></div>
找到盒子的id,修改它的样式,将top重新赋值,每隔100ms重新执行一次函数,实现小盒子向下移动的操作。写在script里面。
//让方块移动 top1=10 t2=setInterval(function(){ top1+=1 document.getElementById('box').style.top=top1+'px' },100)
案例3:盒子增大
创建一个盒子,给盒子一些样式,方便观察。<div id="box1" style="background-color: red;width: 20px;height: 20px;position: absolute;top: 100px;left: 400px;"></div>
每隔100ms,重新执行函数,将id为box1的div盒子的宽度和高度重新赋值,实现逐渐增大的效果。代码写在script里面。
width1=20 height1=20 setInterval(function(){ width1+=1 height1+=1 document.getElementById('box1').style.width=width1+'px' document.getElementById('box1').style.height=height1+'px' },500)
-
clearInterval(定时器对象)
清除定时器,在执行一个事件的时候,关闭setInterval定时器,定时器对象如案例2的t2,将定时器保存为t2。clearInterval(t2)
2 Timeout定时器
在指定的毫秒数后调用函数或计算表达式。(相当于定时炸弹)换句话说,执行一个事件时(点击),等指定的时间过去(1s),执行该函数,执行完毕该函数自动关闭。
setTimeout(function(){
console.log('hello')
},1000)