在浏览器网页的过程中,我们经常可以看到这样的动画:轮播效果中,图片每隔几秒就切换一次;在线时钟中,秒针每隔一秒转一次。拿我们的绿叶学习网来说,首页的图片轮播(如图所示)每隔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了。定时器在实际开发中会大量用到,小伙伴们要重点掌握。