JavaScript の「setTimeout」と「setInterval」を理解する

JavaScript には、タイミング イベントを処理するいくつかの方法が用意されており、最も一般的に使用される 2 つのメソッドは setTimeout と setInterval です。これらの関数を使用すると、指定した時間の経過後、または一定の間隔で繰り返しコードを実行するようにスケジュールできます。この記事では、これらの関数がどのように機能するかを調査し、その使用法を説明するための実践的な例を示します。

setTimeout

setTimeout 関数は、指定された遅延後に関数またはコードの一部を 1 回実行するために使用されます。 setTimeout の構文は次のとおりです:

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

• function: 実行する関数またはコード。
• 遅延: 関数を実行する前に待機する時間 (ミリ秒)。
• [arg1, arg2, ...]: 関数の実行時に関数に渡すオプションの引数。

例 1: 基本的な使用法

function sayHello() {
  console.log('Hello, World!');
}

setTimeout(sayHello, 2000); // Outputs "Hello, World!" after 2 seconds

この例では、sayHello 関数は 2 秒の遅延後に 1 回実行されます。

例 2: 引数の受け渡し

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setTimeout(greet, 2000, 'Alice'); // Outputs "Hello, Alice!" after 2 seconds

ここでは、引数「Alice」をgreet関数に渡し、2秒の遅延後に実行されます。

例 3: 匿名関数の使用

setTimeout(function() {
  console.log('This is an anonymous function!');
}, 3000); // Outputs "This is an anonymous function!" after 3 seconds

setTimeout 内で匿名関数を直接使用することもできます。

セット間隔

setInterval 関数は、関数またはコードの一部を指定された間隔で繰り返し実行するために使用されます。 setInterval の構文は setTimeout:
に似ています。

setInterval(function, interval, [arg1, arg2, ...]);

• function: 実行する関数またはコード。
• 間隔: 各実行間のミリ秒単位の時間。
• [arg1, arg2, ...]: 関数が実行されるたびに関数に渡すオプションの引数。

例 1: 基本的な使用法

function sayHello() {
  console.log('Hello, World!');
}

setInterval(sayHello, 1000); // Outputs "Hello, World!" every 1 second

この例では、sayHello 関数が毎秒実行されます。

例 2: 引数の受け渡し

function greet(name) {
  console.log('Hello, ' + name + '!');
}

setInterval(greet, 1000, 'Alice'); // Outputs "Hello, Alice!" every 1 second

ここでは、引数「Alice」をgreet関数に渡し、毎秒実行されます。

例 3: 匿名関数の使用

setInterval(function() {
  console.log('This is an anonymous function!');
}, 2000); // Outputs "This is an anonymous function!" every 2 seconds

setInterval 内で匿名関数を直接使用することもできます。

タイマーのクリア

setTimeout と setInterval はどちらもタイマー ID を返します。これは、必要に応じてタイマーをクリアするために使用できます。これは、それぞれclearTimeout関数とclearInterval関数を使用して行われます。

例: setTimeout のクリア

const timeoutId = setTimeout(function() {
  console.log('This will not run.');
}, 5000);

clearTimeout(timeoutId); // Cancels the timeout

例: setInterval のクリア

const intervalId = setInterval(function() {
  console.log('This will run only once.');
}, 1000);

setTimeout(function() {
  clearInterval(intervalId); // Stops the interval after 3 seconds
}, 3000);

この例では、clearInterval 関数が 3 秒後に呼び出され、関数の繰り返し実行が停止されます。

実際の使用例

1.setTimeoutによるデバウンス

デバウンスは、関数の実行速度を制限する手法です。たとえば、setTimeout を使用して検索入力フィールドをデバウンスできます:

let timeoutId;

function debounceSearch(query) {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(function() {
    // Perform search operation
    console.log('Searching for:', query);
  }, 300);
}

document.getElementById('searchInput').addEventListener('input', function(event) {
  debounceSearch(event.target.value);
});

2. setInterval を使用した単純なタイマーの作成

let seconds = 0;

function updateTimer() {
  seconds++;
  console.log('Timer:', seconds);
}

const timerId = setInterval(updateTimer, 1000);

// Stop the timer after 10 seconds
setTimeout(function() {
  clearInterval(timerId);
  console.log('Timer stopped');
}, 10000);

結論

JavaScript で時間指定された繰り返しアクションを管理するには、setTimeout と setInterval を理解することが不可欠です。これらの関数を使用すると、ユーザー入力のデバウンス、タイマーの作成、定期的な更新の実行などのタスクを処理できます。これらのツールをマスターすることで、より応答性が高く効率的な Web アプリケーションを構築できます。

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