JS定时器和函数

一个简单的回调函数使用

• 单次定时器setTimeout()，只能定时一次

启动单次定时器：setTimeout(第一个参数是多少毫秒之后要调用的回调函数，第二个参数是毫秒，1000ms等于1s)
<script>
	setTimeout(function(){
		document.write("2秒之后调用回调函数");
	}, 2000);
</script>

或者这样写，将函数定义在外面

fnction demo(){
	console.log("3000ms后调用回调函数");	
}
setTimeout(demo, 3000);

• 多次定时器 setInterval()，循环定时器，间隔指定时间执行一次代码功能

每隔两秒执行一次回调函数;
var i = 0;
setInterval(function(){
	console.log(i);
	i++;
}, 2000);

• 清除多次定时器 clearInterval()，用单次定时器等待多长时间后停止多次定时器

var i = 0;
var set = setInterval(function(){				//接收的set是定时器启动的标识符
	console.log(i);
	i++
}, 2000);

setTimeout(function(){
	clearInterval(set)		// 使用单次定时器让上面的循环定时器执行三次之后
}, 6500);				// 清除循环定时器 clearInterval(要清除的定时器的标识符)

或者在多次定时器内部当某个条件满足时也可以清除定时器

/*定义一个div标签，宽高都为50px;*/
<div id="item1" style="width: 50px; height: 50px; background: red;"></div>
/*通过id属性获取元素，并赋给变量odiv*/
var odiv = document.getElementById('item1)
var i = 50;
/*定时器启动之后返回一个描述符并赋给变量set，描述符用于等会清除这个定时器*/
var set = setInterval(function(){
	i++;
	/*每隔50ms让这个元素的宽高各增加1px;*/
	odiv.style.height=i+'px';
	odiv.style.width=i+'px';
	/*判断 i 等于200的时候清除定时器*/
	if (i==200){
		clearInterval(set);
	};
}, 50);