JS的定时器

JS中的定时器有两种，分别是Interval和setTimeout。

1 Interval的开启和关闭

1. 开启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)
   

2. clearInterval(定时器对象)
   清除定时器，在执行一个事件的时候，关闭setInterval定时器，定时器对象如案例2的t2，将定时器保存为t2。

   clearInterval(t2)
   

2 Timeout定时器

在指定的毫秒数后调用函数或计算表达式。（相当于定时炸弹）换句话说，执行一个事件时（点击），等指定的时间过去（1s），执行该函数，执行完毕该函数自动关闭。

setTimeout(function(){
		console.log('hello')
	},1000)