.NET開発者のためのブログメディア

SE: JavaScriptでのsetTimeoutはどのようなことができるのですか。

PM: 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相当の挙動をさせることができます。

SE: jQueryでsetTimeout相当の挙動をさせる方法もあるのですね。

PM: はい、ご紹介したソースコードをご自身でも書いてみてください。

まとめ

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

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

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020年03月17日
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020年03月16日
【.NETが統合】.NET 5の概要と今後のリリース予定

2020年03月05日

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

.NET開発者のためのブログメディア

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

JavaScriptでのsetTimeoutの使い方とは？

基本的な使い方

setIntervalとの違い

引数指定

イベントとの組み合せ

複数のタイマー

jQueryで記述

まとめ

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

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

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

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

ソフトを用いた3DCGアート/東京都千代田区/【WEB面談可】/テレワーク

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