4.1 関数 setTimeout
JavaScriptのタイマーは、特定の時間間隔で特定のアクションを実行することを可能にするよ。タイマーを扱うための2つの基本的なメソッドは 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