JS定时器有以下两个方法:
setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setTimeout() :在指定的毫秒数后调用函数或计算表达式。
setInterval() 语法 1 setInterval(code,millisec,lang)
参数
描述
code
必需。要调用的函数或要执行的代码串。
millisec
必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
lang
可选。 JScript \
VBScript \
JavaScript
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <body> <input type="text" id="clock" /> <script type="text/javascript"> var int=self.setInterval("clock()",1000); function clock() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("clock").value=t; } </script> <button onclick="int=window.clearInterval(int)">停止</button> </body> </html>
注意事项 调用定时器时,连续点击按钮,定时器间隔的时间会变短。 造成这个情况的原因很简单,多次启动setInterval事件会造成定时器的时间叠加 这样当然会越来越快。
解决方案:
在函数内部,我们可以先清除定时器,再设置定时器。这样的话,每次点击事件发生时,都把前一个定时器清除,再重先开启一个新的定时器。
1 2 3 4 5 6 7 8 9 var clock; function startBtn() { clearInterval(clock); clock=setInterval(setColor,1000); }
setTimeout() 语法 1 setTimeout(code,millisec,lang)
参数
描述
code
必需。要调用的函数后要执行的 JavaScript 代码串。
millisec
必需。在执行代码前需等待的毫秒数。
lang
可选。脚本语言可以是:JScript \
VBScript \
JavaScript
实例演示如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>点击按钮,在等待 3 秒后弹出 "Hello"。</p> <button onclick="myFunction()">点我</button> <script> function myFunction() { setTimeout(function(){alert("Hello")},3000); } </script> </body> </html>