定时器 - JavaScript | 绿叶学习网

在浏览器网页的过程中，我们经常可以看到这样的动画：轮播效果中，图片每隔几秒就切换一次；在线时钟中，秒针每隔一秒转一次。拿我们的绿叶学习网来说，首页的图片轮播（如图所示）每隔2秒就切换一次，大家可以去感受一下。

上面说到的这些动画特效中，其实就用到了“定时器”。所谓的“定时器”，指的是每隔一段时间就执行一次代码。在JavaScript中，对于定时器的实现，有以下2组方法：

一、setTimeout()和clearTimeout()

在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。

语法：

setTimeout(code, time);

说明：

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。

参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

举例：code是一段代码


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function ()
        {
            setTimeout('alert("欢迎来到绿叶学习网");', 2000);
        }
    </script>
</head>
<body>
    <p>2秒后提示欢迎语。</p>
</body>
</html>

浏览器预览效果如图所示。

分析：

打开页面2秒后，会弹出对话框，如图所示。由于setTimeout()方法只会执行一次，所以只会弹出一次对话框。

举例：code是一段函数


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            setTimeout(function () {
                alert("欢迎！");
            }, 2000);
        }
    </script>
</head>
<body>
    <p>2秒后提示欢迎语。</p>
</body>
</html>

浏览器预览效果如图所示。

分析：

这里setTimeout()第一个参数是一个函数，这个函数是没有名字的，也叫匿名函数。匿名函数属于JavaScript进阶的内容。我们从图中就能很清楚看出来第1个参数是一段函数。

举例：code是一个函数名


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            setTimeout(alertMes, 2000);
        }
        function alertMes(){
            alert("欢迎来到绿叶学习网");
        }
    </script>
</head>
<body>
    <p>2秒后提示欢迎语。</p>
</body>
</html>

浏览器预览效果如图所示.

分析：

这里setTimeout()第一个参数是一个函数名，这个函数名是不需要加括号()的！下面两种写法是等价的：

setTimeout(alertMes, 2000)
setTimeout("alertMes()", 2000)

之前接触过不少初学者，很多人都容易搞混这两个写法，如写成setTimeout(alertMes(), 2000)或者setTimeout("alertMes", 2000)，我们一定要注意这一点。一般情况下，我们只需要掌握setTimeout(alertMes, 2000)这一种写法就可以了，原因有2个：一是这种写法性能更高；二是可以避免两种写法造成记忆混乱。

举例：clearTimeout()


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{width:100px;height:100px;border:1px solid silver;}
    </style>
    <script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            //timer存放定时器
            var timer = null;
            oBtn[0].onclick = function () 
            {
                timer = setTimeout(function () {
                    alert("欢迎来到绿叶学习网");
                }, 2000);
            };
            oBtn[1].onclick = function () 
            {
                clearTimeout(timer);
            };
        }
    </script>
</head>
<body>
    <p>点击“开始”按钮，2秒后提示欢迎语。</p>
    <input type="button" value="开始"/>
    <input type="button" value="暂停"/>
</body>
</html>

浏览器预览效果如图所示。

分析：

当我们点击【开始】按钮，两秒后就会弹出对话框。如果在两秒内再点击【暂停】按钮，就不会弹出对话框。这里定义了一个变量timer用于保存setTimeout()这个定时器，以便使用clearTimeout(timer)来暂停。

二、setInterval()和clearInterval()

在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。

语法：

setInterval(code, time);

说明：

参数code可以是一段代码，可以是一个函数，也可以是一个函数名。

参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

此外，setInterval()跟setTimeout()语法是一样的，唯一不同的是：setTimeout()只执行一次；而setInterval()可以重复执行无数次。对于setInterval()来说，下面3种方式都是正确的，这个跟setTimeout()一样：

//方式1
setInterval(function(){…}, 2000)
//方式2
setInterval(alertMes, 2000)
//方式3
setInterval("alertMes()", 2000)

一般情况下，我们只需要掌握前面两种就行。

举例：倒计时效果


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //定义全局变量，用于记录秒数
        var n = 5;
        window.onload = function ()
        {
            //设置定时器，重复执行函数countDown
            setInterval(countDown, 1000);
        }
        //定义函数
        function countDown()
        {
            //判断n是否大于0，因为倒计时不可能有负数
            if (n > 0) {
                n--;
                document.getElementById("num").innerHTML = n;
            }
        }
    </script>
</head>
<body>
    <p>倒计时：<span id="num">5</span></p>
</body>
</html>

浏览器预览效果如图所示。

分析：

如果这里使用setTimeout()来代替setInterval()，就没办法实现倒计时效果了。因为setTimeout()只会执行一次，而setInterval()会重复执行。

举例：clearInterval()


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{width:100px;height:100px;border:1px solid silver;}
    </style>
    <script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            var oDiv = document.getElementsByTagName("div")[0];
            //定义一个数组colors，存放6种颜色
            var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
            //timer用于定时器
            var timer = null;
            //i用于计数
            var i = 0;
            //“开始”按钮
            oBtn[0].onclick = function () 
            {
                //每隔1秒切换一次背景颜色
                timer = setInterval(function () {
                    oDiv.style.backgroundColor = colors[i];
                    i++;
                    i = i % colors.length;
                }, 1000);
            };
            //“暂停”按钮
            oBtn[1].onclick = function () 
            {
                clearInterval(timer);
            };
        }
    </script>
</head>
<body>
    <input type="button" value="开始"/>
    <input type="button" value="暂停"/>
    <div></div>
</body>
</html>

浏览器预览效果如图所示。

分析：

当我们点击【开始】按钮后，div元素每隔一秒就会切换一次背景颜色。当我们点击【暂停】按钮，就会停止。

i = i % colors.length;

使得i可以不断循环0、1、2、3、4、5，这是一个非常棒的技巧，特别是在图片轮播开发中非常有用，小伙伴们认真琢磨一下。

当我们快速不断地点击【开始】按钮，神奇的一幕发生了：背景颜色切换的速度加快了。然后点击【暂停】按钮，却发现根本停不下来！那是什么原因导致的呢？

其实每一次点击，都会新开一个setInterval()，当你不断点击按钮，setInterval()就会累加起来。也就是说，当你点击3次按钮时，其实已经开了3个setInterval()，此时如果你想要停下来，就必须点击3次【暂停】按钮。为了避免这个累加的bug，我们在每次点击【开始】按钮的一开始就要清除一次定时器，改进后的代码如下。

举例：改进后的定时器


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{width:100px;height:100px;border:1px solid silver;}
    </style>
    <script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            var oDiv = document.getElementsByTagName("div")[0];
            //定义一个数组colors，存放6种颜色
            var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
            //timer用于存放定时器
            var timer = null;
            //i用于计数
            var i = 0;
            //“开始”按钮
            oBtn[0].onclick = function () 
            {
                //每次点击“开始”按钮，一开始就清除一次定时器
                clearInterval(timer);
                //每隔1秒切换一次背景颜色
                timer = setInterval(function () {
                    oDiv.style.backgroundColor = colors[i];
                    i++;
                    i = i % colors.length;
                }, 1000);
            };
            //“暂停”按钮
            oBtn[1].onclick = function () 
            {
                clearInterval(timer);
            };
        }
    </script>
</head>
<body>
    <input type="button" value="开始"/>
    <input type="button" value="暂停"/>
    <div></div>
</body>
</html>

浏览器预览效果如图所示。

分析：

此时即使我们快速不断地点击【开始】按钮，也不会出现定时器累加的bug了。定时器在实际开发中会大量用到，小伙伴们要重点掌握。