【JavaScriptのタイマー関数】setInterval, clearInterval, setTimeout,clearTimeoutについて

この記事では、JavaScriptのタイマー関数であるsetInterval、clearInterval、setTimeout、clearTimeoutについて解説します。これらの関数は、特定の間隔で繰り返し実行される処理や、一定時間後に関数を実行する処理を作成するために使用されます。

setIntervalの使い方
- setIntervalの構文
- setIntervalのサンプルコード
clearIntervalの使い方
- clearIntervalの構文
- clearIntervalのサンプルコード
setTimeoutの使い方
- setTimeoutの構文
- setTimeoutのサンプルコード
clearTimeoutの使い方
- clearTimeoutの構文
- clearTimeoutのサンプルコード
まとめ

setIntervalの使い方

setInterval関数は、第1引数に実行する関数、第2引数に実行間隔（ミリ秒単位）を指定します。関数は指定された間隔ごとに繰り返し実行されます。

setIntervalの構文

setInterval(実行したい関数定義, 実行間隔);

setIntervalのサンプルコード

const hello_hello_hello = setInterval(() => {
  console.log("Hello!");
}, 1000);

この例では、console.log("Hello!"); が1000ミリ秒（1秒）ごとに実行されます。

clearIntervalの使い方

clearInterval関数は、setInterval関数によって開始された繰り返し処理をキャンセルするために使用されます。clearIntervalには、setInterval関数を引数として指定します。

clearIntervalの構文

clearInterval(setInterval関数定義);

clearIntervalのサンプルコード

let counter = 0;

const hello_five = setInterval(() => {
  console.log("Hello!");
  counter++;

  if (counter === 5) {
    clearInterval(hello_five);
    console.log("５回言ったのでもう言いません");
  }
}, 1000);

この例では、console.log("Hello!"); が1秒ごとに実行されますが、5秒後に clearInterval が呼ばれて繰り返し処理が停止し、console.log("５回言ったのでもう言いません!"); が実行されます。

setTimeoutの使い方

setTimeout は JavaScript のタイマー関数のひとつで、指定された時間が経過した後に一度だけ関数を実行します。

setTimeoutの構文

setTimeout(実行したい関数定義, 待ち時間);

setTimeoutのサンプルコード

const delayHello = setTimeout(() => {
  console.log("Hello!");
}, 2000);

この例では、console.log("Hello!"); が2000ミリ秒（2秒）後に一度だけ実行されます。

clearTimeoutの使い方

clearTimeout 関数は、setTimeout 関数によって設定されたタイマーをキャンセルするために使用されます。clearTimeout には、setTimeout 関数を引数として指定します。

clearTimeoutの構文

clearTimeout(setTimeout関数定義);

clearTimeoutのサンプルコード

const delayHello = setTimeout(() => {
  console.log("Hello!");
}, 2000);

setTimeout(() => {
  clearTimeout(delayHello);
  console.log("やっぱり言うのやめます!");
}, 1000);

この例では、`console.log("Hello!");` が2秒後に実行される予定でしたが、1秒後に `clearTimeout` が呼ばれてタイマーがキャンセルされ、`console.log("Canceled!");` が実行されます。そのため、`console.log("Hello!");` は実行されません。

まとめ

setInterval、clearInterval、setTimeout、そしてclearTimeoutは、JavaScriptで繰り返し処理や遅延実行を実現するために非常に便利な関数です。setIntervalで指定した間隔で関数が繰り返し実行され、clearIntervalで繰り返し処理を停止することができます。また、setTimeoutで指定した時間が経過した後に関数が実行され、clearTimeoutでタイマーをキャンセルすることができます。これらの関数を使いこなすことで、タイマーを使った機能やアニメーション、遅延実行などを実装することが可能になります。

目次