JavaScriptの"時間"系の関数！一定時間ごとの繰り返しや時間経過後に実行させる方法を解説！

JavaScript

【 2025/06/17 19:52 更新】

JavaScriptの時間を使った処理って？

JavaScriptの関数を使って、一定の時間ごとに繰り返したり、一定時間経過後に処理を実行させたりすることができます。

こじはなは、処理時間をずらしたり細かいアニメーションを作るとき使ってるよ〜！

【本記事で紹介する内容】

setInterval()：指定した一定時間毎に繰り返せる
requestAnimationFrame()：ブラウザのタイミング(約16.7ミリ秒)毎に処理を繰り返せる
setTimeout()：指定の時間が経過した後に処理を実行させる
async関数・await変数・Promiseオブジェクトを使って、指定の時間が経過後に実行させる

JavaScriptの基礎知識が分からない

本記事は、JavaScriptの基礎知識をおさえた前提の内容です。

JavaScriptとは？変数,配列,連想配列,条件,繰り返し,関数,DOM操作など基本的な使い方を解説！

こじはなNote

setInterval()｜【単純な処理用】指定した一定時間ごとに繰り返す

setInterval()を使うと、指定した一定時間ごとに処理を繰り返し実行させることができます。

似た動作のrequestAnimationFrame()は主に描画するとき、滑らかに実行したい場合に使いますが、
setInterval()は滑らかさ不要な定期的な処理用です。

【 setInterval()の書き方】

〜シンプル〜
setInterval(() => {
　　　　処理 // 一定時間ごとに実行される！
}, 指定の時間(ミリ秒));

〜途中で止めたい場合〜
変数 = setInterval(() => {
　　　　処理
}, 指定の時間(ミリ秒));
clearInterval(変数);

【例】
let interval = setInterval(() => {
　　　　console.log("5秒毎に実行される予定！");
}, 5000);
// 途中でキャンセル
clearInterval(interval);

ミリ秒とは

ミリ秒は時間の単位で、1000ミリ秒=1秒となります。

【 HTML 】


<p id="text">テキスト</p>
<button id="textChange3ms">3秒毎にテキスト変更</button>
<button id="textChangeStop">繰り返し終了</button>

【 JavaScript 】


let interval;

/*
 * setIntervalスタート処理
 */

// 変更するテキストのDOM要素
let text = document.getElementById("text");

// "3秒毎にテキスト変更"ボタンのDOM要素
let textChange3ms = document.getElementById("textChange3ms");

let countS = 0; // 秒カウンター

// ボタンがクリックされたら実行
textChange3ms.addEventListener("click", function() {

    interval = setInterval(() => {
        countS+= 3;
        text.textContent = countS + "秒経過！"
    }, 3000);

});

/*
 * setInterval停止処理
 */

// "繰り返し終了"ボタンのDOM要素を取得
let textChangeStop = document.getElementById("textChangeStop");

// ボタンがクリックされたら実行
textChangeStop.addEventListener("click", function() {

    clearInterval(interval);

});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

document.getElementById()

document.getElementById(id名)は、HTMLタグのidを指定して取得する書き方です。

【 .getElementById()の使い方】

document.getElementById("id名");

【例】
// idが"test-h1"のDOM要素を取得
let test_h1_El = document.getElementById("test-h1");
// テキスト変更
test_h1_El.textContent = "JavaScriptで文字を変えました！";

【.getElementById()の記事】
DOM要素を取得｜document.getElementById("id名")(JavaScriptとは？変数...)｜こじはなNote

【.getElementsByClassName()の記事】
DOM要素を取得｜document.getElementsByClassName("class名")(JavaScr...)｜こじはなNote

.addEventListener("click",function(){})

Elementオブジェクト.addEventListener("click",function(){})と書くと、要素がクリックされたときに処理を実行できます。

【 JSのイベントの書き方】

Elementオブジェクト.addEventListener("イベント名", function() {
　　　　処理 // イベントが起こった場合に実行される！
});

【例】
let button01 = document.getElementById("button01");
button01.addEventListener("click", function() {
　　　　alert("ボタンがクリックされました！");
});

【 JavaScriptイベント関係の記事】

JavaScriptのイベント操作でよく使うイベント20選！使い方を解説！

こじはなNote

.textContent

"Elementオブジェクト.textContent"と書くと、DOM要素内のテキストを取得・変更ができます。

【 .textContentの使い方】

Elementオブジェクト.textContent;

【例】
// idが"test-h1"のDOM要素を取得
let h1El = document.getElementById("test-h1");
h1El.textContent = "JSで文字を変更！";

【 .textContentに関する記事】
DOM要素内のテキストを取得/変更｜Elementオブジェクト.textContent(JavaScriptとは？変数,配列,連...) | こじはなNote

requestAnimationFrame()｜【描画用】約16.7ミリ秒毎に繰り返す

requestAnimationFrame()を使うとブラウザのタイミング(約16.7ミリ秒)毎に処理を繰り返し実行させることができます。

似た動作のsetInterval()は滑らかさ不要な定期的な処理用ですが、
requestAnimationFrame()は主に描画するとき、滑らかに実行したい場合に使います。

【 requestAnimationFrame()の書き方】

〜シンプル〜
function 繰り返し用関数名(引数名) { // 引数は経過時間が渡される

　　　　処理 // 約16.7ミリ秒毎に実行される！
　　　　requestAnimationFrame(繰り返し用関数名); // 自分を呼び出して繰り返し

}

〜途中で止めたい場合〜
停止フラグ用の変数 = false;

function 繰り返し用関数名(引数名) {
　　　　if(停止フラグ用の変数) return; // trueなら停止！
　　　　処理
　　　　requestAnimationFrame(繰り返し用関数名);
}

停止フラグ用の変数 = true; // 停止させる！

ミリ秒とは

ミリ秒は時間の単位で、1000ミリ秒=1秒となります。

【 HTML 】


<p id="text">テキスト</p>
<button id="textChange">テキスト変更開始</button>
<button id="textChangeStop">繰り返し終了</button>

【 JavaScript 】


/*
 * requestAnimationFrameループ関数
 */

let stop = false;

function animationLoop(time) {

    if (stop) return; // stopがtrueになったら終了

    text.textContent = time + "秒経過！"
    requestAnimationFrame(animationLoop); // 自分自身を呼び出し、ループ
}

/*
 * requestAnimationFrameスタート処理
 */

// 変更するテキストのDOM要素
let text = document.getElementById("text");

// "テキスト変更開始"ボタンのDOM要素
let textChange = document.getElementById("textChange");

// ボタンがクリックされたら実行
textChange.addEventListener("click", function() {

    stop = false;
    animationLoop();

});

/*
 * setInterval停止処理
 */

// "繰り返し終了"ボタンのDOM要素を取得
let textChangeStop = document.getElementById("textChangeStop");

// ボタンがクリックされたら実行
textChangeStop.addEventListener("click", function() {

    stop = true;

});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

document.getElementById()

document.getElementById(id名)は、HTMLタグのidを指定して取得する書き方です。

【 .getElementById()の使い方】

document.getElementById("id名");

【例】
// idが"test-h1"のDOM要素を取得
let test_h1_El = document.getElementById("test-h1");
// テキスト変更
test_h1_El.textContent = "JavaScriptで文字を変えました！";

【.getElementById()の記事】
DOM要素を取得｜document.getElementById("id名")(JavaScriptとは？変数...)｜こじはなNote

【.getElementsByClassName()の記事】
DOM要素を取得｜document.getElementsByClassName("class名")(JavaScr...)｜こじはなNote

.addEventListener("click",function(){})

Elementオブジェクト.addEventListener("click",function(){})と書くと、要素がクリックされたときに処理を実行できます。

【 JSのイベントの書き方】

Elementオブジェクト.addEventListener("イベント名", function() {
　　　　処理 // イベントが起こった場合に実行される！
});

【例】
let button01 = document.getElementById("button01");
button01.addEventListener("click", function() {
　　　　alert("ボタンがクリックされました！");
});

【 JavaScriptイベント関係の記事】

JavaScriptのイベント操作でよく使うイベント20選！使い方を解説！

こじはなNote

.textContent

"Elementオブジェクト.textContent"と書くと、DOM要素内のテキストを取得・変更ができます。

【 .textContentの使い方】

Elementオブジェクト.textContent;

【例】
// idが"test-h1"のDOM要素を取得
let h1El = document.getElementById("test-h1");
h1El.textContent = "JSで文字を変更！";

【 .textContentに関する記事】
DOM要素内のテキストを取得/変更｜Elementオブジェクト.textContent(JavaScriptとは？変数,配列,連...) | こじはなNote

setTimeout()｜指定の時間が経過後に実行

setTimeout()を使うと、指定の時間が経過した後に処理を実行させることができます。

【 setTimeout()の書き方】

〜シンプル〜
setTimeout(() => {
　　　　処理 // 時間経過後に実行される！
}, 指定の時間(ミリ秒));

〜途中で止めたい場合〜
変数 = setTimeout(() => {
　　　　処理
}, 指定の時間(ミリ秒));
clearTimeout(変数);

【例】
let timeout = setTimeout(() => {
　　　　console.log("5秒後に実行される予定！");
}, 5000);
// 途中でキャンセル
clearTimeout(timeout);

ミリ秒とは

ミリ秒は時間の単位で、1000ミリ秒=1秒となります。

【 HTML 】


<button id="alert3ms">3秒後アラート実行</button>
<button id="alertStop">アラートストップ</button>

【 JavaScript 】


let timeout;

/*
 * setTimeoutスタート処理
 */

// "3秒後アラート実行"ボタンのDOM要素
let alert3ms = document.getElementById("alert3ms");

// ボタンがクリックされたら実行
alert3ms.addEventListener("click", function() {

    timeout = setTimeout(() => {
        alert("3秒経過したよ！");
    }, 3000);

});

/*
 * setTimeout停止処理
 */

// i"アラートストップ"ボタンのDOM要素
let alertStop = document.getElementById("alertStop");

// ボタンがクリックされたら実行
alertStop.addEventListener("click", function() {

    clearTimeout(timeout);

});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

ボタン"3秒後アラート実行"を押すと3秒後にアラートが実行されますが、
3秒経過前に"アラートストップ"を押すとアラートが実行されません。

document.getElementById()

document.getElementById(id名)は、HTMLタグのidを指定して取得する書き方です。

【 .getElementById()の使い方】

document.getElementById("id名");

【例】
// idが"test-h1"のDOM要素を取得
let test_h1_El = document.getElementById("test-h1");
// テキスト変更
test_h1_El.textContent = "JavaScriptで文字を変えました！";

【.getElementById()の記事】
DOM要素を取得｜document.getElementById("id名")(JavaScriptとは？変数...)｜こじはなNote

【.getElementsByClassName()の記事】
DOM要素を取得｜document.getElementsByClassName("class名")(JavaScr...)｜こじはなNote

.addEventListener("click",function(){})

Elementオブジェクト.addEventListener("click",function(){})と書くと、要素がクリックされたときに処理を実行できます。

【 JSのイベントの書き方】

Elementオブジェクト.addEventListener("イベント名", function() {
　　　　処理 // イベントが起こった場合に実行される！
});

【例】
let button01 = document.getElementById("button01");
button01.addEventListener("click", function() {
　　　　alert("ボタンがクリックされました！");
});

【 JavaScriptイベント関係の記事】

JavaScriptのイベント操作でよく使うイベント20選！使い方を解説！

こじはなNote

【難易度高】async関数・await変数・Promiseオブジェクトを使って、指定の時間が経過後に実行させる

async関数・await変数・Promiseオブジェクトを使うと、指定した時間だけ待つ関数を作れます。

【 HTML 】


<button id="testSleep">スリープ後にアラート</button>

【 JavaScript 】


/*
 * 指定した時間だけ待つ関数
 * Promise実行用
 */

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

/*
 * 指定した時間だけ待つ関数
 * async関数内でawaitで呼び出す用
 */

async function setSleep(ms) {
    await setSleepPromise(ms);  // 3秒待つ
    alert(ms + "ミリ秒後に実行完了！");
}

/*
 * クリックイベント
 * setSleep()実行用
 */

// "スリープ後にアラート"ボタンのDOM要素
let testSleep = document.getElementById("testSleep");

// ボタンがクリックされたら実行
testSleep.addEventListener("click", function() {

    let ms = 3000;
    setSleep(ms);

});

ブラウザで実行するとこんな感じです。

以下のエリアで、操作してみてください！

document.getElementById()

document.getElementById(id名)は、HTMLタグのidを指定して取得する書き方です。

【 .getElementById()の使い方】

document.getElementById("id名");

【例】
// idが"test-h1"のDOM要素を取得
let test_h1_El = document.getElementById("test-h1");
// テキスト変更
test_h1_El.textContent = "JavaScriptで文字を変えました！";

【.getElementById()の記事】
DOM要素を取得｜document.getElementById("id名")(JavaScriptとは？変数...)｜こじはなNote

【.getElementsByClassName()の記事】
DOM要素を取得｜document.getElementsByClassName("class名")(JavaScr...)｜こじはなNote

.addEventListener("click",function(){})

Elementオブジェクト.addEventListener("click",function(){})と書くと、要素がクリックされたときに処理を実行できます。

【 JSのイベントの書き方】

Elementオブジェクト.addEventListener("イベント名", function() {
　　　　処理 // イベントが起こった場合に実行される！
});

【例】
let button01 = document.getElementById("button01");
button01.addEventListener("click", function() {
　　　　alert("ボタンがクリックされました！");
});

【 JavaScriptイベント関係の記事】

JavaScriptのイベント操作でよく使うイベント20選！使い方を解説！

こじはなNote

async関数とは

async関数は、非同期処理（API通信など時間がかかる操作）用の関数です。
また、async関数にすると自動的にPromiseを返す関数になります。

〜書き方〜
async function 関数名() {
　　処理
}

await変数とは

awaitは、async関数内でのみ使用できる宣言キーワードです。
非同期処理（API通信など時間がかかる操作）が完全に終了するまで以降の処理を停止させることができます。

〜書き方〜
async function 関数名() {
　　await 関数名();
}

Promiseオブジェクトとは

Promiseは、時間がかかる処理の「結果」をあとで受け取れるようにする仕組みです。
非同期処理を「値」として扱えることが特徴の１つです。

〜書き方〜
new Promise ( resolve => 処理 );
// resolveは、"処理成功"を意味する関数

まとめ

JavaScriptではソッドを使って、一定の時間ごとに繰り返したり、一定時間経過後に処理を実行させたりすることができる。
setInterval()を使うと、指定した一定時間ごとに処理を繰り返し実行させることができる。
requestAnimationFrame()を使うとブラウザのタイミング(約16.7ミリ秒)毎に処理を繰り返し実行させることができる。
setTimeout()を使うと、指定の時間が経過した後に処理を実行させることができる。
async関数・await変数・Promiseオブジェクトを使うと、指定した時間だけ待つ関数を作れる。

JavaScript

【 2025/06/17 19:52 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！