定時器&&定時調用&&延時調用

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>