JS关于时间计时器setTimeout()和setInterval()实例

最新推荐文章于 2023-03-24 16:26:21 发布

Houzhyan

最新推荐文章于 2023-03-24 16:26:21 发布

阅读量2.8k

点赞数

分类专栏： JavaScript 文章标签： setInterval setTimeout js倒计时函数清除倒计时 js倒计时实例

本文链接：https://blog.csdn.net/h330531987/article/details/68489288

版权

JavaScript 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

今天想写个倒计时的小应用,然后查了下两个函数setTimeout()和setInterval()都可以实现,都属于全局对象window。所以特地将js的这两函数的一些用法实例整理一下.

1.概念

1.setTimeout()HTML DOM Window 对象

定义和用法

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法

setTimeout(code,millisec)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。

清除

var t = setTimeout(code,millisec)
clearTimeout(t)   //清除计时器

提示和注释

提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

2.setInterval()HTML DOM Window 对象

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

可以使用一个变量保存,

var sit = setInterval(code,millisec[,"lang"])

sit一个可以传递给 Window.clearInterval()从而取消对 code 的周期性执行的值。

2.区别

setTimeout和setInterval的主要区别是：

setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。（即要循环运行，需函数自身再次调用 setTimeout()）

而 setInterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。

3.setTimeout()实例

例1. 点击后 5 秒后会显示一个消息框

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>

<body>
<form>
<input type="button" value="显示计时的消息框！" onClick = "timedMsg()">
</form>
<p>点击上面的按钮。5 秒后会显示一个消息框。</p>
</body>
</html>

例2. 在按钮上面点击。输入框会显示出已经流逝的 2、4、6 秒钟

<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000)
}
</script>
</head>

<body>
<form>
<input type="button" value="显示计时的文本！" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>在按钮上面点击。输入框会显示出已经流逝的 2、4、6 秒钟。</p>
</body>
</html>

例3.带开始和停止功能计时器

<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}

function stopCount()
{
clearTimeout(t)
}
</script>
</head>

<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p>
</body>
</html>

例4. 时钟

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10) 
  {i="0" + i}
  return i
}
</script>
</head>

<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>

注意:以上使用了递归调用.

4.setInterval()实例

例1. 时钟

<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
<button οnclick="int=window.clearInterval(int)">Stop interval</button>

</body>
</html>

例2. 每隔5秒弹出信息

// 该函数需要两个参数
function sayHello(name, age){
    alert("我叫" + name + "，今年" + age + "岁!");
}
//每隔5秒钟就弹出提示信息"我叫CodePlayer，今年18岁!"。
setInterval(sayHello, 5000, "CodePlayer", 18);

例3. 全局作用域执行注意作用域问题,结果输出15

// 以下是错误的用法，setInterval的定时代码无法调用局部变量site
function foo(){
    var site = "CodePlayer";
    setInterval('alert(site);', 5000);   
}
foo();

var x = 15;
function bar(){
    var x = 18;
    setInterval('alert(x);', 5000); // 15
}
// 由于setInterval的定时代码是在全局作用域下执行的，因此这里的x为15
bar();

例4. 你可以通过以下方法来间接解决上述作用域问题：

// 省略var修饰符，使用全局变量代替局部变量
function foo1(){
    site = "CodePlayer 1";
    setInterval('alert(site);', 5000);   
}
foo1();

// 不使用变量，直接传递变量的值
function foo2(){
    var site = "CodePlayer 2";
    setInterval('alert("' + site + '");', 5000);
}
foo2();

// 延长作用域链，使其能够访问到该函数作用域
function foo3(){
    var site = "CodePlayer 3";
    setInterval(function(){
        alert(site);
    }, 5000);   
}
foo3();

// 调用指定的函数，并给函数传递相应的参数
function callback(msg){
    alert(msg);
}
function foo4(){
    var site = "CodePlayer 4";
    setInterval(callback, 5000, site);   
}
foo4();

本文部分代码资料参考:

JavaScript setInterval() 函数详解 http://www.365mini.com/page/javascript-setinterval.htm
javascript的setTimeout()用法总结，js的setTimeout()方法 http://www.haorooms.com/post/js_setTimeout

W3Cschool http://www.w3school.com.cn/jsref/met_win_setinterval.asp