Help us understand the problem. What is going on with this article?

JavaScript勉強の記録その22:setTimeoutとclearTimeoutを使って関数を呼び出す

setTimeoutを使って関数を呼び出す

setInterval(関数名,ミリ秒)とすることで、特定のメソッドを指定したミリ秒間隔で呼び続けることができますが、setTimeoutはsetTimeout(関数名,ミリ秒)とすることで、特定のメソッドをミリ秒後に1度だけ呼ぶことができます。

例えば以下の例では、ボタンがクリックされてから、2秒後にDateオブジェクトが生成されてコンソールに表示されています。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Javascript Practice</title>
</head>
<body>
  <button type="click" id="button">showDatePerSecondを呼ぶ</button>
  <script src="main.js"></script>
</body>
</html>
index.js
function showDateTimePerSecond() {
   console.log(new Date());
};

document.getElementById('button').onclick = function(){
  setTimeout(showDateTimePerSecond,2000);
}

image.png

setTimeout(関数名,ミリ秒)で繰り返し関数を呼ぶ

setTimeoutもsetIntervalと似たような使い方ができます。
以下の例では、showDateTimePerSecondの関数内でsetTimeoutを呼び、引数にshowDateTimePerSecondを取ることで繰り返しの処理をしています。

index.js
function showDateTimePerSecond() {
  console.log(new Date());
  setTimeout(showDateTimePerSecond, 1000);
};

showDateTimePerSecond();

clearTimeout()で処理を止める

setTimeoutの繰り返しを止めるには、clearTimeoutというメソッドが用意されています。
以下の例では変数iが3になった時点でclearTimeoutを呼んで処理を止めています。

index.js
let i = 0;

function showDateTimePerSecond() {
  console.log(new Date());
  const timeoutId = setTimeout(showDateTimePerSecond, 1000);
  i ++;
  if (i > 2) {
    clearTimeout(timeoutId);
  }
};

showDateTimePerSecond();

setIntervalとsetTimeoutの違い

setIntervalで繰り返し処理を行うのと、setTimeoutで繰り返し処理を行うのではどのような違いがあるでしょう?

以下のサイトがとてもわかりやすいです。要は、

setInterval ← 呼び出しを行なった関数の処理終了は関係なく、指定された時間になったら問答無用で引数で渡されている関数を呼ぶ。
setTimeoutで繰り返し処理 ← 呼び出しを行なった関数の処理が終わった後、指令された時間を置いて、引数で渡されている関数を呼ぶ。

https://ja.javascript.info/settimeout-setinterval

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした