処理を遅延して実行する (一定時間経過後に処理を実行する)

このページのタグ:[JavaScript]
JavaScriptで一定時間が経過してから処理を実行したいことがあります。この記事では遅延して処理を実行するコードを紹介します。

概要

JavaScriptで一致時間経過後に処理を実行するにはsetTimeout()メソッドを用います。

時間経過後にJavaScriptの関数を呼び出す場合

コード

下記のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <script type="text/javascript">
    function func() {
      target = document.getElementById("output");
      target.style.backgroundColor = "#ffe35f";
      target.innerText = "ボタンがクリックされました。";
    }

    function delayExec() {
      setTimeout('func();', 1500);
    }
  </script>
</head>
<body>
  <input type="button" value="Click" onclick="delayExec();" />
  <div id="output"></div>
</body>
</html>

解説

setTimeoutメソッドの第一引数に実行するコードを文字列で与えます。第二引数は実行開始までの時間を与えます。時間はミリ秒単位になります。上記の例では第一引数に"func();"を第二引数に1500を与えているため、1500ミリ秒(1.5秒)が経過後func()関数を実行します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。

時間経過後に関数リテラル(匿名関数)で記述した処理を呼び出す場合

コード

下記のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>

  <script type="text/javascript">
  function delayExec() {
    setTimeout(function () {
      target = document.getElementById("output");
      target.style.backgroundColor = "#e2abff";
      target.innerText = "ボタンがクリックされました。";
    }, 1500);
  }
  </script>

</head>
<body>
  <input type="button" value="Click" onclick="delayExec();" />
  <div id="output"></div>
</body>
</html>

解説

setTimeoutメソッドの第一引数に実行する関数リテラルを与えます。第二引数は実行開始までの時間を与えます。時間はミリ秒単位になります。上記の例では1500ミリ秒(1.5秒)が経過後、第一引数に記述した関数リテラルを実行します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。

時間経過後にJavaScriptの関数を引数を与えて呼び出す場合

コード

下記のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script type="text/javascript">
    function func(text) {
      target = document.getElementById("output");
      target.style.backgroundColor = "#daf763";
      target.innerText = text + "です。";
    }

    function delayExec(text) {
      funcstr = "func('"+text+"');";
      setTimeout(funcstr, 1500);
    }
  </script>
</head>
<body>
  <input type="button" value="Click" onclick="delayExec('ペンギン');" />
  <div id="output"></div>
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。また、関数に値が渡されていることも確認できます。

時間経過後に関数リテラル(匿名関数)で記述した処理を引数を与えて呼び出す場合

コード

下記のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>

  <script type="text/javascript">
  function delayExec(text) {
    setTimeout(function (textstr) {
      target = document.getElementById("output");
      target.style.backgroundColor = "#b7ffe8";
      target.innerText = textstr+"です。";
    }, 1500, text);
  }
  </script> 

</head>
<body>
  <input type="button" value="Click" onclick="delayExec('あひる');" />
  <div id="output"></div>
</body>
</html>

解説

setTimeoutメソッドの第一引数に実行する関数リテラルを与えます。第二引数は実行開始までの時間を与えます、第三引数に関数リテラルに与える引数を与えます。上記の例では1500ミリ秒(1.5秒)が経過後、第一引数に記述した関数リテラルを実行します。関数リテラルのtextstr変数には、setTimeoutの第三引数textの内容が渡されます。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。


[Click]ボタンをクリックします。ボタンをクリック後、1.5秒ほどすると下図の状態に変わります。遅延して処理が実行されていることが確認できます。また、関数リテラル(匿名関数)に値が渡されていることも確認できます。

登録日 :2014-06-09    最終更新日 :2014-06-09
このページのタグ:[JavaScript]
Japanese
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)