JavaScriptでのsetTimeoutの使い方｜基本的な使い方からsetIntervalとの違いなどを紹介

Javascript
プログラミング言語

公開日時: 2021-09-07 　更新日時: 2022-06-06

JavaScriptでのsetTimeoutの使い方｜基本的な使い方からsetIntervalとの違いなどを紹介

この記事でわかること

システム エンジニア: JavaScriptでのsetTimeoutはどのようなことができるのですか。

プロジェクト マネージャー: setTimeoutを使用すると、指定時間後に処理を実行できます。基本的な使い方、setIntervalとの違い、引数指定などについて紹介しましょう。

JavaScriptでのsetTimeoutの使い方とは？

今回は、JavaScriptでのsetTimeoutの使い方について説明します。setTimeoutを使用すると、指定時間後に処理を実行することができます。
ここでは、
・基本的な使い方
・setIntervalとの違い
・引数指定
・イベントとの組み合せ
・複数のタイマー
・jQueryで記述
について紹介します。

JavaScriptでのsetTimeoutの使い方に興味のある方はぜひご覧ください。

基本的な使い方

setTimeoutの基本的な使い方を紹介します。実際のソースコードを見てみましょう。

// 3秒後にコンソールログ出力
setTimeout(function(){
  console.log("3秒経過しました。");
}, 3000);

// 3秒後にコンソールログ出力

setTimeout(function(){

console.log("3秒経過しました。");

}, 3000);

実行すると、3秒後にコンソールログに「3秒経過しました。」と表示されます。このように、指定時間後に処理を実行することができます。

setTimeoutには、関数を指定することもできます。実際のソースコードを見てみましょう。

let my_function = function(){
  console.log("3秒経過しました。");
}
// 3秒後に関数（my_function）実行
setTimeout(my_function, 3000);

let my_function = function(){

console.log("3秒経過しました。");

}

// 3秒後に関数（my_function）実行

setTimeout(my_function, 3000);

実行すると、3秒後にコンソールログに「3秒経過しました。」と表示されます。このように、指定時間後に関数を実行することができます。

setIntervalとの違い

setTimeoutとよく似た関数にsetIntervalがあります。ここでは、setTimeoutとsetIntervalの違いについて紹介します。setIntervalは指定秒数ごとに処理を実行する関数です。実際のソースコードを見てみましょう。

let my_function = function(){
  console.log("3秒経過しました。");
}
// 3秒ごとに関数（my_function）実行
setInterval(my_function, 3000);

let my_function = function(){

console.log("3秒経過しました。");

}

// 3秒ごとに関数（my_function）実行

setInterval(my_function, 3000);

実行すると、3秒ごとにコンソールログに「3秒経過しました。」と表示されます。

setTimeoutは1度しか実行しませんが、setTimeoutでsetIntervalのような挙動をさせることができます。実際のソースコードを見てみましょう。

let my_function = function(){
  console.log("3秒経過しました。");
  // 3秒後に関数（my_function）実行
  setTimeout(my_function, 3000);
}
// 関数（my_function）実行
my_function();

let my_function = function(){

console.log("3秒経過しました。");

// 3秒後に関数（my_function）実行

setTimeout(my_function, 3000);

}

// 関数（my_function）実行

my_function();

実行すると、3秒ごとにコンソールログに「3秒経過しました。」と表示されます。

引数指定

setTimeoutで関数を実行できることは紹介しました。ここでは、関数に引数を指定する方法を紹介します。関数に引数を指定するには、第3引数に指定します。実際のソースコードを見てみましょう。

let my_function = function(arg){
  console.log("3秒経過しました。" + arg);
}
// 3秒後に関数（my_function）実行
setTimeout(my_function, 3000, "argument");

let my_function = function(arg){

console.log("3秒経過しました。" + arg);

}

// 3秒後に関数（my_function）実行

setTimeout(my_function, 3000, "argument");

実行すると、3秒後にコンソールログに「3秒経過しました。argument」と表示されます。引数が渡せていることが分かります。

イベントとの組み合せ

イベントとsetTimeoutを組み合わせることもできます。実際のソースコードを見てみましょう。

<input type="button" value="button" onclick="my_function()">

<script>
  // ボタンクリック時に呼び出される関数
  var my_function = function(){

    // 3秒後にコンソールログ出力
    setTimeout(function(){
      console.log("ボタンをクリックしてから3秒経過しました。");
    }, 3000);
  }
</script>

// ボタンクリック時に呼び出される関数

var my_function = function(){

// 3秒後にコンソールログ出力

setTimeout(function(){

console.log("ボタンをクリックしてから3秒経過しました。");

}, 3000);

}

</script>

実行結果は以下のようになります。ボタンをクリックすると、3秒後にコンソールログに「ボタンをクリックしてから3秒経過しました。」と表示されます。

See the Pen
setTimeout1 by kskumd (@kskumd)
on CodePen.

このように、イベントとsetTimeoutを組み合わせることもできます。

複数のタイマー

setTimeoutを複数組み合わせることもできます。X秒後に処理Aを実行し、処理Aが終わったY秒後に処理Bを実行し、…のように非同期処理をタイマーで実現できます。実際のソースコードを見てみましょう。

// 1秒後に実行する関数
setTimeout(function() {
  console.log('1秒経過しました。');

  // 2秒後に実行する関数
  setTimeout(function() {
    console.log('2秒経過しました。');

    // 3秒後に実行する関数
    setTimeout(function() {
        console.log('3秒経過しました。');
    }, 3000);
  }, 2000);
}, 1000);

// 1秒後に実行する関数

setTimeout(function() {

console.log('1秒経過しました。');

// 2秒後に実行する関数

setTimeout(function() {

console.log('2秒経過しました。');

// 3秒後に実行する関数

setTimeout(function() {

console.log('3秒経過しました。');

}, 3000);

}, 2000);

}, 1000);

実行すると、1秒後に「1秒経過しました。」、その2秒後に「2秒経過しました。」、その3秒後に「3秒経過しました。」と表示されます。
しかしながら、このソースはネストが深くて分かりづらいソースになっています。

このソースコードをシンプルにする方法として、Promiseを使用する方法があります。thenで複数連結することができます。実際のソースコードを見てみましょう。

const sleep = ms => new Promise(resolve => setTimeout(() => resolve(), ms))

sleep(1000)
.then(() => {
    console.log('1秒経過しました。')
    return sleep(2000)
}).then(() => {
    console.log('2秒経過しました。')
    return sleep(3000)
}).then(() => {
    console.log('3秒経過しました。')
})

const sleep = ms => new Promise(resolve => setTimeout(() => resolve(), ms))

sleep(1000)

.then(() => {

console.log('1秒経過しました。')

return sleep(2000)

}).then(() => {

console.log('2秒経過しました。')

return sleep(3000)

}).then(() => {

console.log('3秒経過しました。')

})

実行すると、同じく1秒後に「1秒経過しました。」、その2秒後に「2秒経過しました。」、その3秒後に「3秒経過しました。」と表示されます。
こちらの方がシンプルなコードになります。Promiseを使用した非同期処理についてもマスターしてください。

jQueryで記述

jQueryでsetTimeout相当の挙動をさせる方法を紹介します。実際のソースコードを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
  </head>
  <body>
    <div id="hello">
      <p>hoge</p>
    </div>
    <input type="button" value="3秒後に変化します" onclick="change_html()">
    
    <script>
      var change_html = function(){
        // jQueryで取得、3秒後に変更
        $(this).delay(3000).queue(function(){
          $("#hello").html("jQuery").css('color', 'Red');
        });
      }
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

var change_html = function(){

// jQueryで取得、3秒後に変更

$(this).delay(3000).queue(function(){

$("#hello").html("jQuery").css('color', 'Red');

});

}

</script>

</body>

</html>

実行結果は以下のようになります。ボタンをクリックして3秒後にhtml要素が変更されることが分かります。

See the Pen
setTimeout2 by kskumd (@kskumd)
on CodePen.

このように、jQueryでもsetTimeout相当の挙動をさせることができます。

システム エンジニア: jQueryでsetTimeout相当の挙動をさせる方法もあるのですね。

プロジェクト マネージャー: はい、ご紹介したソースコードをご自身でも書いてみてください。

まとめ

いかがでしたでしょうか。JavaScriptでのsetTimeoutの使い方について説明しました。setTimeoutを使用すると、指定時間後に処理を実行することができます。
基本的な使い方から、setIntervalとの違い、引数指定、イベントとの組み合せ、複数のタイマー、jQueryで記述について紹介しました。

ぜひご自身でJavaScriptのソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

JavaScriptでのsetTimeoutの使い方｜基本的な使い方からsetIntervalとの違いなどを紹介

JavaScriptでのsetTimeoutの使い方とは？

基本的な使い方

setIntervalとの違い

引数指定

イベントとの組み合せ

複数のタイマー

jQueryで記述

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

JavaScriptでのsetTimeoutの使い方｜基本的な使い方からsetIntervalとの違いなどを紹介

JavaScriptでのsetTimeoutの使い方とは？

基本的な使い方

setIntervalとの違い

引数指定

イベントとの組み合せ

複数のタイマー

jQueryで記述

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

JavaScriptのライブラリ5選

jQueryでのaddClassメソッドの使い方を紹介！複数classを追加する方法とは？

jQueryのon loadとは？jQueryのon loadは適切に使おう！

JavaScriptのconstとは？varの使い方やvar・let・constを使わなかった場合を解説

getElementByIdの使い方｜基本的な使い方からjQueryでの記述方法まで紹介！