Javascript 笔记与总结（2-13）定时器 setTimeout 和 setInterval

浏览数：48 / 时间：2015年06月08日

定时器可以让 js 效果每隔几秒钟执行一次或者 n 秒之后执行某一个效果。定时器不属于 javascript，是 window 对象提供的功能。

setTimeout 用法：

window.setTimeout(‘语句‘,毫秒);   //指定毫秒后执行一次语句

【例】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            background: blue;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <p id="p">定时改变文字</p>
    <script>
        function change(){
            document.getElementById("p").innerHTML = "已更换";
        }
        window.setTimeout("change()", 3000); //3秒之后执行change方法
    </script>    
</body>
</html>

优化：定时器的效果之上加上倒计时效果

setInterval(‘语句‘,毫秒);  //每隔指定毫秒执行一次

清除定时器：

clearInterval();
和
clearTimeout();

【代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            background: blue;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <input type="button" name="time" value="5">
    <p id="p">定时改变文字</p>                
    <script>
        function change(){
            var inp = document.getElementsByName("time")[0];
            var time = parseInt(inp.value)-1;
            inp.value = time;
            if(time == 0){
                document.getElementById("p").innerHTML = "已更换";
                clearInterval(clock);  //清除定时器
            }
        }
        var clock = setInterval("change()", 1000); //每秒钟执行一次
    </script>    
</body>
</html>

【例】如果不适用 setInterval，只使用 setTimeout，达到每过一段时间执行一次的效果

使用 setTimeout 实现 setInterval 的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            background: blue;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <input type="button" name="time" value="5">
    <p id="p">定时改变文字</p>                
    <script>
        var clock = null;
        function change(){
            var inp = document.getElementsByName("time")[0];
            var time = parseInt(inp.value)-1;
            inp.value = time;
            if(time == 0){
                document.getElementById("p").innerHTML = "已更换";
                clearTimeout(clock);
                return;
            }
            setTimeout("change()", 1000);
        }
        var clock = setTimeout("change()", 1000); //每秒钟执行一次
    </script>    
</body>
</html>