JavaScript计时器示例分析

时间：2021-05-26

1.什么是JavaScript计时器？

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

2.计时器类型

一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次

3.计时器方法

1):一次性计时器

A):setTimeout(): 指定的延迟时间之后来执行代码,进执行一次

语法:setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

B):clearTimeout():取消setTimeout()设置

语法:clearTimeout(timer)

参数说明:
timer：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

调用setTimeout()和clearTimeout()延迟方法:

复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript计时器</title>
<input type="button" value="开始" id="btnStart" onclick="StartPrint()">
<input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//定义打印方法
function Print()
{
console.log("我在打印!");
}
var timer;//该值标识要取消的延迟执行代码块
//开始打印
function StartPrint()
{
timer=setTimeout(Print,1000);//调用计时器,延迟1秒打印,只执行一次
}
//结束打印
function StopPrint()
{
clearTimeout(timer);//取消计时器
}
</script>
</body>
</html>

调用setTimeout()和clearTimeout()无限循环方法:

复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript计时器</title>
<input type="button" value="开始" id="btnStart" onclick="StartPrint()">
<input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//定义打印方法
function Print()
{
console.log("我在打印!");
timer=setTimeout(Print,1000);//开始计时器,调用自己,进行无穷循环
}
var timer;//该值表示要取消延迟执行的代码块
//开始打印
function StartPrint()
{
Print();//调用打印方法
}
//结束打印
function StopPrint()
{
clearTimeout(timer);//取消计时器
}
</script>
</body>
</html>


2):间隔性触发计时器

A):setInterval():在执行时,从载入页面后每隔指定的时间执行代码

语法:setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000) 或 setInterval(clock,1000)

B):clearInterval() 方法可取消由 setInterval() 设置的交互时间

语法：clearInterval(timer)

参数说明:
timer：由 setInterval() 返回的 ID 值。

调用setInterval()和clearInterval() 执行间隔执行方法实例

复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript计时器</title>
<input type="button" value="开始" id="btnStart" onclick="StartPrint()">
<input type="button" value="暂停" id="btnStop" onclick="StopPrint()">
<br>
</head>
<body>
<script type="text/javascript">
//定义打印方法
function Print()
{
console.log("我在打印!");
}
var timer;//该值标识要取消的计时器执行代码块
//开始打印
function StartPrint()
{
timer=setInterval("Print()",1000);//开始计时器
}
//结束打印
function StopPrint()
{
clearInterval(timer);;//取消计时器
}
</script>
</body>
</html>

以上就是本文所述的全部内容了，希望小伙伴们能够喜欢。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章