JavaScript の「setTimeout」と「setInterval」をマスターする

JavaScript の忙しい世界では、時間管理が鍵となります。動的 Web アプリケーションを開発していて、一定期間後に関数を実行するか、指定した間隔で関数を繰り返し実行する必要があると想像してください。ここで setTimeout と setInterval が役に立ちます。これら 2 つの関数を使用すると、開発者はコード実行のタイミングを制御でき、Web アプリケーションをより対話的で応答性の高いものにすることができます。このブログでは、setTimeout と setInterval について詳しく説明し、魅力的な例を通じてその使用法を探り、それらを使った async/await の使用方法について説明します。

setTimeout の基本

setTimeoutとは何ですか?

setTimeout は、タイマーを設定する JavaScript 関数で、タイマーが期限切れになると関数または指定されたコード部分を実行します。これは、非同期操作を管理するための基本的なツールです。

setTimeoutの構文

setTimeout(function, delay, arg1, arg2, ...);

• function: タイマーの期限切れ後に実行される関数。
• 遅延: 関数が実行されるまでの時間 (ミリ秒)。
• arg1、arg2、...: 関数に渡される追加の引数。

例: 単純な setTimeout

簡単な例から始めましょう。料理をしていて、5 秒以内にオーブンを確認するようリマインダーが必要な場合を想像してください。

function checkOven() {
    console.log("Time to check the oven!");
}

setTimeout(checkOven, 5000); // 5000 milliseconds = 5 seconds

この例では、checkOven 関数は 5 秒後に 1 回実行されます。

setInterval の基本

setIntervalとは何ですか?

setInterval は、関数または指定されたコード部分を繰り返し実行するタイマーを設定する JavaScript 関数です。各呼び出しの間に一定の遅延時間を設けます。

setIntervalの構文

setInterval(function, delay, arg1, arg2, ...);

• function: 繰り返し実行される関数。
• 遅延: 各関数の実行間のミリ秒単位の時間。
• arg1、arg2、...: 関数に渡される追加の引数。

例: 単純な setInterval

料理シナリオを強化しましょう。スープを 2 秒ごとにかき混ぜる必要があるとします。

function stirSoup() {
    console.log("Stirring the soup...");
}

setInterval(stirSoup, 2000); // 2000 milliseconds = 2 seconds

この例では、stirSoup 関数は 2 秒ごとに実行されます。

タイマーのクリア

クリアタイムアウト

setTimeout の実行を停止するには、clearTimeout を使用します。

let timerId = setTimeout(checkOven, 5000);

// Cancel the timer
clearTimeout(timerId);

クリア間隔

setInterval の繰り返しを停止するには、clearInterval を使用します。

let intervalId = setInterval(stirSoup, 2000);

// Cancel the interval
clearInterval(intervalId);

例による高度な使用法

関数に引数を渡す

setTimeout と setInterval は両方とも、実行中の関数に引数を渡すことができます。

function greet(name) {
    console.log(`Hello, ${name}!`);
}

setTimeout(greet, 3000, "Alice"); // Outputs "Hello, Alice!" after 3 seconds

定期的なタスクのネストされた setTimeout

setInterval を使用する代わりに、ネストされた setTimeout を使用して、繰り返しタスクをより正確に制御できます。

function fetchData() {
    console.log("Fetching data...");

    setTimeout(fetchData, 2000); // Recursively call fetchData every 2 seconds
}

fetchData();

ストーリー: デジタルキッチンタイマー

デジタル キッチン タイマー アプリを構築していると想像してください。ユーザーは、さまざまな調理タスクに対して複数のタイマーを設定できます。 setTimeout と setInterval を使用すると、これらのタイマーを効率的に管理できます。

class KitchenTimer {
    constructor() {
        this.timers = [];
    }

    addTimer(name, duration) {
        let timerId = setTimeout(() => {
            console.log(`${name} timer done!`);
            this.removeTimer(timerId);
        }, duration);

        this.timers.push({ name, timerId });
        console.log(`${name} timer set for ${duration / 1000} seconds.`);
    }

    removeTimer(timerId) {
        this.timers = this.timers.filter(timer => timer.timerId !== timerId);
    }

    clearAllTimers() {
        this.timers.forEach(timer => clearTimeout(timer.timerId));
        this.timers = [];
        console.log("All timers cleared.");
    }
}

let myKitchen = new KitchenTimer();
myKitchen.addTimer("Pasta", 5000);
myKitchen.addTimer("Cake", 10000);

setTimeout(() => {
    myKitchen.clearAllTimers();
}, 8000); // Clear all timers after 8 seconds

setTimeout での async と await の使用

setTimeout は Promise ベースの関数ではありませんが、Promise でラップすることで async や await で使用できます。

例: Promise での setTimeout のラップ

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask() {
    console.log("Task started...");
    await delay(2000);
    console.log("Task completed after 2 seconds.");
}

asyncTask();

この例では、遅延関数は、指定された遅延後に解決される Promise を返します。 asyncTask 関数は await を使用して、Promise が解決されるまで実行を一時停止します。

setInterval での async と await の使用

async および await を使用した setInterval の処理は、遅延を繰り返し待機する方法が必要となるため、より複雑です。

例: async と await を使用した setInterval のシミュレーション

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncIntervalTask() {
    while (true) {
        console.log("Interval task executing...");
        await delay(2000);
    }
}

asyncIntervalTask();

この例では、asyncIntervalTask​​ 関数は、遅延関数で await を指定した while ループを使用して、繰り返しタスクをシミュレートします。

結論

setTimeout と setInterval を理解して習得することは、JavaScript 開発者にとって非常に重要です。これらの関数は、アプリケーションのタイミングと非同期操作を管理するための強力な方法を提供します。これらの機能を活用することで、よりインタラクティブで動的な Web エクスペリエンスを作成できます。さらに、これらを async および await と統合することで、非同期コードの制御と明確さをさらに高めることができます。

デジタル キッチン タイマーを構築している場合でも、正確なタイミングが必要なその他のアプリケーションを構築している場合でも、setTimeout と setInterval は JavaScript ツールキットの重要なツールです。コーディングを楽しんでください!

以上がJavaScript の「setTimeout」と「setInterval」をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。