4.1 函数 setTimeout
JavaScript里面的计时器可以让你在指定的时间间隔后执行一些操作。两个主要的计时器方法是setTimeout()和setInterval()。它们用来延迟执行代码或者周期性地执行代码。
setTimeout()方法可以让函数在指定的毫秒后执行一次。这个方法很适合用来延迟执行代码。
语法：
const timeoutID = setTimeout(callback, delay, ...args);
其中：
callback: 将要执行的函数delay: 在函数执行前的毫秒延迟时间args: 将传递给callback函数的额外参数
使用setTimeout()的例子：
JavaScript
// 函数将在2秒后执行
function greet() {
console.log('Hello, world!');
}
// 设置计时器
const timeoutID = setTimeout(greet, 2000);
4.2 取消 setTimeout 的计时器
如果需要取消通过setTimeout()计划的函数执行，可以使用clearTimeout()方法：
JavaScript
// 函数将在2秒后执行
function greet() {
console.log('Hello, world!');
}
// 设置计时器
const timeoutID = setTimeout(greet, 2000);
// 取消计时器
clearTimeout(timeoutID);
带额外参数的例子：
JavaScript
// 具有参数的函数将在2秒后执行
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 设置计时器并传递参数
const timeoutID = setTimeout(greet, 2000, 'Alice');
4.3 函数 setInterval
setInterval()方法允许在指定的时间间隔后重复执行一个函数。这对于周期性地执行代码很有用。
语法：
const intervalID = setInterval(callback, delay, ...args);
其中：
callback: 将要执行的函数delay: 函数调用之间的毫秒间隔args: 将传递给callback函数的额外参数
使用 setInterval 的例子：
JavaScript
// 函数每隔2秒执行一次
function greet() {
console.log('Hello, world!');
}
// 设置间隔
const intervalID = setInterval(greet, 2000);
4.4 取消 setInterval 的间隔
如果需要停止重复执行的函数，可以使用clearInterval()方法。
JavaScript
// 函数每隔2秒执行一次
function greet() {
console.log('Hello, world!');
}
// 设置间隔
const intervalID = setInterval(greet, 2000);
// 取消间隔在10秒后
setTimeout(() => {
clearInterval(intervalID);
console.log('Interval cleared');
}, 10000);
带额外参数的例子：
JavaScript
// 具有参数的函数每隔2秒执行一次
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 设置间隔并传递参数
const intervalID = setInterval(greet, 2000, 'Alice');
4.5 实用例子
例子1: 自动更新时间
HTML
<!DOCTYPE html>
<html>
<head>
<title>Auto-update Time</title>
</head>
<body>
<h1>Current Time</h1>
<div id="time"></div>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString();
document.getElementById('time').textContent = timeString;
}
// 每秒更新时间
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
例子2: 周期性数据请求
JavaScript
// 模拟数据请求的函数
function fetchData() {
console.log('Fetching data...');
// 这里可以执行实际的服务器请求
}
// 每10秒请求一次数据
const intervalID = setInterval(fetchData, 10000);
// 1分钟后停止请求
setTimeout(() => {
clearInterval(intervalID);
console.log('Stopped fetching data');
}, 60000);
GO TO FULL VERSION