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>自動更新時間</title>
</head>
<body>
<h1>當前時間</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