浅谈JavaScript的计时器对象
在JavaScript中，计时器对象是一种十分实用的工具，它可以让我们控制代码的执行时间、更新动态显示效果、制作动画等等。本文将对JavaScript的计时器对象做一个简单的介绍和说明。
定时器的种类
在JavaScript中，定时器分为两种：Interval 和 Timeout。两者的作用是可以做指定的操作，不同之处在于执行的时间不同。
setInterval(callback, time)方法会每隔指定的时间不间断地调用一次指定的函数(callback)setTimeout(callback, time)方法则是在指定的时间后调用一次指定的函数(callback)
两个方法都需要传递两个参数，第一个是需要执行的函数(callback)，第二个则是指定的时间(单位为毫秒)，初始化后将会开启一个计时器，并返回一个计时器的ID，可以用于取消计时器的使用。
参数详解
两个方法都有两个参数, 第一个参数是要执行的函数，第二个参数是毫秒单位的时间。对于 setInterval方法：
- 函数 func 会每隔指定时间被调用一次
- 调用 setInterval 会返回一个id，可以用来在之后取消这个事件。
- 可以在
callback函数中使用clearInterval来停止循环
对于 setTimeout 方法：
- 函数
func将会在指定时间后被调用 - 调用
setTimeout会返回一个id，可以用来在之后取消这个事件。 - 可以在
callback函数中使用clearTimeout来强制取消事件
简单示例
下面是两个简单的示例说明定时器的使用：
- 每隔一秒钟输出 "Hello World" 直到用户点击停止按钮时停止
<!DOCTYPE html>
<html>
<head>
<title>示例1</title>
</head>
<body>
<p id="demo"></p>
<button onclick="stopTimer()">停止</button>
<script>
var timer = setInterval(function() {
document.getElementById("demo").innerHTML += "Hello World<br>";
}, 1000);
function stopTimer() {
clearInterval(timer);
}
</script>
</body>
</html>
- 在1秒后改变元素文本中的内容
<!DOCTYPE html>
<html>
<head>
<title>示例2</title>
</head>
<body>
<p id="demo">Hello World</p>
<button onclick="stopTimer()">停止</button>
<script>
var timer = setTimeout(function() {
document.getElementById("demo").innerHTML = "Hi World";
}, 1000);
function stopTimer() {
clearTimeout(timer);
}
</script>
</body>
</html>
以上就是关于JavaScript计时器的简短介绍以及示例的说明。通过使用计时器，可以让我们的网页更加生动和有趣。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈JavaScript的计时器对象 - Python技术站
微信扫一扫 
支付宝扫一扫 