【JavaScript】setTimeout()を学べる簡単なサンプルを紹介したい【初心者向け】

この記事は約3分で読めます。

 

ミミウサ
ミミウサ

JavaScript 初心者ですが、勉強中です。
setTimeout()コマンドというのがありますが、
なんで”out”なんですか?

ひとつ簡単なサンプルを作ってみたら、setTimeout()コマンドの動きが理解できました。

ボタンを押して2秒後にアラートを表示するJavaScriptの例を使って、setTimeout()コマンドの使い方を学んでみましょう。

JavaScriptサンプル「2秒後にアラートを表示する」

setTimeout()コマンドを学ぶために作成するサンプルは、完成すると次のように動作します。

ボタンを押して2秒後に「ご飯ですよ」のアラートボックスが表示されるものです。

ちょっとしたタイマーです。

このソースコードは以下に掲載しています。

setTimeout()コマンドとは

setTimeout(処理内容, 時間)

で、指定時間後に一度だけ処理を実行します。

時間は処理を実行するまでの時間で、ミリ秒(例:1秒=1000ミリ秒)単位で指定します。

setTimeoutは「設定(set)した時間(time)が過ぎたとき(out)の処理内容」というように考えると理解しやすいですね。

”out”は設定した時間(setTime)から外れた時の”out”なのですね!

サンプル「2秒後にアラートを表示する」のソースコード

ソースコードと解説は以下のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>Timer</title>
<script type="text/javascript">
  function execute(){
   alert ("It's time for lunch! ご飯ですよ");
   //指定時間後の実行内容。ここではAlertを表示。
  }
  function exec_timeout(){
   setTimeout("execute();", 2000);
   //2000ミリ秒=2秒後に、execute()のfunctionを実行する。
  }
</script>
</head>
<body>
 <h1>Timer</h1>
 <form action="#">
   <input type="button" value="Press this button 押して" onclick="exec_timeout();" >
   //このボタンがclickされたらexec_timeout()を実行する。
 </form>
</body>
</html>

まとめ

setTimeout()コマンドの使い方を学べる、ボタンを押して2秒後にアラートを表示するJavaScriptのサンプルとコードをご紹介してきました。

簡単な作例を作っていくのが一番、コマンドを理解するのに役立ちそうです。

タイトルとURLをコピーしました