JavaScript 定时器
前言
什么是定时器？JS提供了一些原生方法来实现延时去执行某一段代码。下面来简单介绍一下 setTimeout，setInterval 定时器。
setTimeout
用于在一段时间后仅执行一次函数或指定的代码段。
语法：
window.setTimeout(function, milliseconds)
- 第一个参数是要执行的函数。
- 第二个参数指示执行前的毫秒数（1秒= 1000毫秒）。
示例：单击按钮2秒钟后将显示提示消息
<!DOCTYPE html>
<html>
<title></title>
<body>
<p>等待2秒后，点击第一个按钮，提示"Hello world"。</p>
<p>点击第二个按钮，防止第一个函数执行。(必须在2秒之前点击)</p>
<button onclick="myFunc()">点击</button>
<button onclick="myStopFunc()">停止alert</button>
<script>
var t;
function myFunc() {
t = setTimeout(function(){ alert("Hello world"); }, 2000);
}
function myStopFunc() {
clearTimeout(t);
}
</script>
</body>
</html>
停止执行：
clearTimeout() 方法停止执行setTimeout()中指定的函数。
window.clearTimeout(var)
clearTimeout() 方法使用从setTimeout()返回的变量。
t = setTimeout();
clearTimeout(t);
如果尚未执行该函数，则可以通过调用clearTimeout() 方法来停止执行。
setInterval
按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
语法：
window.setInterval(function, milliseconds)
- 第一个参数是我们要执行的函数
- 第二个参数指示每次执行之间的时间间隔的长度。
示例：每秒执行一次称为“ startTimer”的功能
<!DOCTYPE html>
<html>
<title></title>
<head>
<style>
#result {
display: flex;
justify-content: center;
color: #ec181e;
font-size: 25vw;
font-weight: 900;
text-shadow: 0 6px 4px rgba(255, 100, 100, 0.6);
}
</style>
</head>
<body>
<div id="result">00:00:00</div>
<button onclick="stopTimer()">停止时间</button>
<script>
// 每1秒执行一次startTimer()
var t = setInterval(startTimer, 1000);
function startTimer() {
var date = new Date();
document.getElementById("result").innerHTML = date.toLocaleTimeString();
}
// 取消使用setInterval()创建的重复动作
function stopTimer() {
clearInterval(t);
}
</script>
</body>
</html>
停止执行
clearInterval() 方法停止执行 setInterval() 中指定的函数。
window.clearInterval(var)
clearInterval() 方法使用从setInterval()返回的变量。
t = setInterval();
clearInterval(t);
区别:
- setTimeout 允许设置一个超时对象，超时后执行这个对象，但是只执行一次，无周期。
- setInternval 允许设置一个超时对象，超时后执行这个对象，周期等于超时对象指定的时间，周期为无限循环。
发表评论 (审核通过后显示评论)：