定时器&&定时调用&&延时调用

setInterval（回调函数，每次调用间隔时间）

返回值：返回一个Number类型的数据，用来作为唯一标识

clearInterval关闭定时器

		<script type="text/javascript">
			window.onload = function(){
				var count = document.getElementById("count");
				//每间隔一段时间执行一次，可以使用定时调用
				/*for(var i = 0;i<10;i++){
					count.innerHTML = i;
				}*/
				//定时调用
				//1回调函数2每次间隔时间（ms）
				//返回值：返回一个Number类型的数据，
				var num = 1;
				
				var timer = setInterval(function(){
					count.innerHTML = num++;
					if(num==11){
						clearInterval(timer);
					}
				},1000);
				//关闭定时器
				//clearInterval()
			}
			
		</script>

定时切换图片

		<script type="text/javascript">
			window.onload = function(){
				//自动切换
				var img1 = document.getElementById("img1");
				
				var imgArr = ["img/1.jpg","img/77B65B8382D22ACC8DBED7C0FA9DF602.gif","img/v2-55c82c3467fafc796cd2c2dea5c1498f.jpg"];
			
				var index = 0;//保存索引
				var timer;
				
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//每点击一次就开启一个定时器，点击多次，开启多个，导致图片切换速度过快，并且只能关闭最后一次开启的定时器
					//在开启定时器之前，需要将当前的其他定时器关闭，
					clearInterval(timer);
					timer = setInterval(function(){	
					
					index++;
					//修改属性
					/*if(index>= imgArr.length){
						index = 0;
					}*/
					index = index%imgArr.length;
					
					img1.src = imgArr[index];
				},1000);
				}
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					clearInterval(timer);//可以接受任意的参数，如果参数是一个有效的定时器标识，则停止对应的标识，如果不是不进行操作
					
				}
				
			}
		</script>

使用定时调用使图片的移动平顺不卡顿

		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var speed = 10;	
				var dir = 0;//方向
				
				
					//开启定时器控制控制div的移动
					setInterval(function(){
						switch(dir){
						case 37:
							box1.style.left = box1.offsetLeft - 10 +"px";
							break;
						case 38:
							box1.style.left = box1.offsetLeft + 10 +"px";
							break;
						case 39:
							box1.style.top  = box1.offsetTop - 10 +"px";
							break;
						case 40:	
							box1.style.top  = box1.offsetTop + 10 +"px";
							break;
					}
					},30);
				document.onkeydown = function(event){
					event = event  || window.event;
					
					
					if(event.ctrlKey){
						speed = 200;
					}else{
						speed = 10;
					}
					dir = event.keyCode;	
					
				};
				document.onkeyup =  function(){
					dir = 0;
				}
			};
		</script>

延时调用

		<script type="text/javascript">
			var num = 1;
			/*setInterval(function(){
				console.log(num++);
			},3000);
			*/
			//延时调用：函数不马上执行，一段时间以后再执行 ，，只执行一次
			//延时和定时可以互相代替，
			var timer = setTimeout(function(){
				console.log("1");
			},10000);
			clearTimeout(timer);//关闭延时调用
		</script>