定时器

定时器分为两种，一种是延时定时器，另一种是循环定时器。

setTimeout()

setTimeout()是延时定时器，默认只执行一次。它有两个参数，第一个参数是函数或者语句；第二个参数是延迟的时间，单位是ms。

setTimeout(fn,2000);//2秒后执行一次fn函数
setTimeout('fn()',2000);
setTimeout('alert("延时定时机器")',2000);

语句作为参数时，需要用’’引起来。

clearTimeout()

有设置延时，自然也有清除延时。setTimeout()会有一个返回值，这个返回值就是clearTimeout()的参数。

var timer = setTimeout(fn,2000);
clearTimeout(timer);

setInterval()

setInterval()是循环定时器，在不关闭浏览器，不刷新，不清除定时器的情况下，会一直执行下去。用法、参数和setTimeout()一样。

setInterval(fn,2000);//2秒后执行一次fn函数
setInterval('fn()',2000);
setInterval('alert("延时定时机器")',2000);

clearInterval()

与clearTimeout()用法一样。
var timer = setInterval(fn,2000);
clearInterval(timer);

#应用小例子
第一个例子：发送延时

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="send" value="发送验证码">
    <input type="button" id="reset" value="重试">
    <script type="text/javascript">
        window.onload=function(){
            var send=document.getElementById('send'),
            reset=document.getElementById('reset'),
            times=60,
            timer=null;
            send.onclick=function(){
                // 计时开始 
                timer = setInterval(timeAdd,1000);
            }
            function timeAdd(){
                reset.value = times + '秒后重试';
                reset.disabled = "false";
                times--;
                if(times < 0){
                    clearInterval(timer);
                    timeEnd();
                } 
            }
            function timeEnd(){
                times = 60;
                reset.value = "重试";
            }
        }
    </script>
</body>
</html>

运行结果是：
result
result
第二个例子：图片自动切换

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <style>
        *{margin:0;
          padding:0;
          list-style:none;}
        .wrap{height:170px;
              width:490px;
              margin:60px auto;
              overflow: hidden;
              position: relative;
              margin:100px auto;}
        .wrap ul{position:absolute;} 
        .wrap ul li{height:170px;}
        .wrap ol{position:absolute;
                 right:5px;
                 bottom:10px;}
        .wrap ol li{height:20px; width: 20px;
                    background:#ccc;
                    border:solid 1px #666;
                    margin-left:5px;
                    color:#000;
                    float:left;
                    line-height:20px;
                    text-align:center;
                    cursor:pointer;}
        .wrap ol .on{background:#E97305;
                     color:#fff;}
    </style>
</head>
<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
        <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
        <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
    </ul>
    <ol id="list">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
<script type="text/javascript">
        window.onload=function(){
            var wrap=document.getElementById('wrap'),
            pic=document.getElementById('pic').getElementsByTagName('li'),
            list=document.getElementById('list').getElementsByTagName('li'),
            index=0,
            timer=null;
            // 定义并调用自动播放函数
            timer = setInterval(autoPlay,2000);
            function autoPlay(){
                index++;
                if(index >= pic.length){
                    index = 0;
                } 
            autoPic(index);   
        }
        // 定义图片切换函数
        function autoPic(curIndex){
            for(var i = 0;i<pic.length;i++){
                pic[i].style.display = "none";
                list[i].className = "";   
            }
            pic[curIndex].style.display = "block";
            list[curIndex].className = "on";
            index = curIndex;//解决鼠标滑过按钮，移开之后，应该从该按钮下一个开始轮播
        } 
        // 鼠标划过整个容器时停止自动播放
        wrap.onmouseover = function(){
            clearInterval(timer);
        }
        // 鼠标离开整个容器时继续播放至下一张
        wrap.onmouseout = function(){
            timer = setInterval(autoPlay,2000);
        }   
        // 遍历所有数字导航实现划过切换至对应的图片
        for(var i = 0;i<list.length;i++){
            list[i].index = i;
            list[i].onmouseover = function(){
                clearInterval(timer);  
                autoPic(this.index);  
            }
        }
    }
</script>
</body>
</html>

运行结果是：大家可以自己试一试
result