JavaScriptのsetInterval()とsetTimeout()を使い方

2021年2月20日JavaScript

JavaScriptのsetInterval()とsetTimeout()を使い方をまとめました。

setInterval()の使い方

時刻を指定した時間ごとに返したい場合に、使えるのがsetInterval()命令です。 第一引数に関数、第二引数にミリ秒を渡すと、関数を指定したミリ秒間隔で実行してくれるという命令です。 タイマー機能に必須なので、具体的なserInterval()の使い方は次の通りです。 setInterval()はミリ秒なので、1秒なら1000を指定してあげる。 また関数を引数として渡すときは、()をつけてはいけない。 setInterval(showTime, 2000)だと2秒後にshowTime関数を実行するという意味になります。 注意点としては、showTIme()とshowTimeでは意味が違います。 ()をつけると、この関数を実行することで得られる値をsetInterval()に渡すことになり、やりたいことと異なってしまいます。返り値の設定がないので、undefinedとなってしまいます。 
'use strict';

  {
    function showTime() {
      console.log(new Date());
    }
    
    setInterval(showTime, 2000);

  }

setInterval()の止め方

上の状態だけでは、ずっと処理が繰り返されます。 setInterval()を止める手順は次の通りです。
  • setInterval()を定数に格納する
  • カウンター用の変数iをグローバルスコープで設定する
  • 関数内に繰り返し処理をかく
  • 条件文を書く(指定した回数になったらclearInterval()を処理)
setInterval()を止めるためには、clearInterval()という命令を使います。 そのためにはclearInterval()に渡すために、setInterval()を実行したときの値を定数に格納します。 今回は定数をinterval4timesとして、setInterval()が4回実行されたときに止めるとします。 繰り返し処理を書き、条件がきたら、clearInterval()命令に渡せば処理がとまります。 
'use strict';

{
  let i = 0;

  function showTime() {
    console.log(new Date());
    i++;
    if (i > 3) {
      clearInterval(interval4times);
    }
  }
  
    const interval4times = setInterval(showTime, 1000);
}

タイマーの作り方


{

//timerの関数
  const startTimer = function () {

//タイマーを止めるためには名前をつけておく必要がある
    const tick = function () {
      const min = String(Math.trunc(time / 60)).padStart(2, 0);
      const sec = String(time % 60).padStart(2, 0);

// 呼び出されるたびに時間を表示
      console.log(`${min}: ${sec}`);

// 0秒になったらtimerをとめて、メッセージを出す
      if (time === 0) {
        clearInterval(timer);
        console.log(`タイムアップです`);
      }

// 1sごとにtimeを減らす
      time--;
　　　　　 //これを上にかくと残り1秒に達した時点でtime === 0となりメッセージが表示されてしまう。
    };

// タイマー時間を設定
    let time = 100;

// 1秒ごとに呼び出す
    tick(); //最初に一回呼び出すこと。これがないと始まる前にも1秒待たないといけなくなります。
    const timer = setInterval(tick, 1000);

  };

//timerを呼び出す
  timer = startTimer();
}
 
  • タイマーを止めるためには名前をつけておく必要があります。
  • 呼び出されるたびに時間を表示します。
  • 0秒になったらtimerをとめて、したい処理をしましょう。今回の場合はメッセージを出しています。
  • 1sごとにtimeを減らしましょう。
  • タイマーの時間を設定します。
  • timerを呼び出します。
注意点としては、最初に一回呼び出すことです。そうしないと始まる前にも1秒待たないといけなくなります。 また、「1sごとにtimeを減らす」処理について、「0秒になったらtimerをとめて、したい処理をする」前に記述しておく必要があります。 なぜなら、「1sごとにtimeを減らす」処理を先に書いてしまうと、残り1秒になったときにすでに0秒になったときの処理をしてしまうからです。

timerを呼び出しについて

 
  • timerを呼び出すには、timer = startTimer()関数とします。
  • その中に、const timer = setInterval(tick, 1000)と設定します。
  • そのためtickが呼ばれて、またtimer = setInterval(tick, 1000)でtickが呼ばれます。
  • そして、 (time === 0) になったら、clearInterval(timer)で止まります。

setTimeout()の使い方

指定した時間に一回だけ実行するときに使う命令が、setTimeout()です。 setInterval()と要領は同じで、第一引数に関数、第二引数にミリ秒を渡します。 setTimeout()はミリ秒なので、1秒なら1000を指定します。 また関数を引数として渡すときは、()はつけません。 1回だけ実行されるのですが、関数の中に入れることで、繰り返し実行させることもできます。 
'use strict';
{
  function showTime() {
    console.log(new Date);
    setTimeout(showTime, 1000);
  }

  showTime();

}
  }
一番したのshowTime();が実行されると、 showTime()が実行されます。 showTime()の中のsetTimeout()でshowTimeが呼び出されます。 そしてshowTime()が実行されて、を1000ミリ秒ごとに繰り返すことになります。 結果的にsetInterval()と似たこともできます。

setTimeout()の止め方

このように関数の中に入れて繰り返し処理しているsetTimeout()を止めるには、setInterval()とほぼ同じようなことを行います。 変数iでカウンター用の数値をつくります。 変数iが条件を満たしたとき、clearTimeout()で止めることができます。 clearTimeout()に引数を渡す必要があるので、timeout6timesなどとして、 setTimeout(showTime, 1000)を定数timeout6timesに格納します。 
'use strict';
{
  let i = 0;

  function showTime() {
    console.log(new Date);
    const timeout6times = setTimeout(showTime, 1000);
    i++;
    if (i > 5) {
      clearTimeout(timeout6times);
    }
  }

  showTime();
}

setTimeout()の内部関数に引数を設定する

setTimeout()は、コールバック関数を取ります。 


setTimeout((ing1, ing2) => 
 console.log(`${ing1}と${ing2}を入れたカレーです。`),
 3000,
 'トマト',
 'なす'
);
//トマトとなすを入れたカレーです。
setTimeoutのコールバック関数に引数を設定することで、setTimeout()の第2引数の時間を設定した後の引数に渡すことができます。 また、次のように条件を組み合わせてタイマーを動かさないこともできます。 



const ingredients = ['にんじん','たまねぎ', 'じゃがいも'];

const curry = setTimeout(
  (ing1, ing2, ing3) => 
console.log(`${ing1},${ing2},${ing3}の入ったカレーです。`),
  2000,
  ...ingredients //スプレッド構文でいれれる
);

if(ingredients.includes('たまねぎ')) clearTimeout(curry);
//これは動作しない

タイマー処理の違いを理解する

setIntervalとsetTimeoutは同じように使えても、挙動が異なります。

setIntervalの仕組み

setIntervalは、指定した時間で繰り返し処理をするための命令です。 1000msごとに指定して、処理に200msかかる場合、きっかり1000msごとに処理が実行されます。 同様に、指定した時間より多い、たとえば1500msかかる処理を1000msごとに実行するとした場合も、 きっかり1000msごとに処理が実行されます。 そのため、処理が被る時間が発生し、システムに負荷がかかる場合があります。

setTimeoutの仕組み

setTimeoutの場合、200msの処理が終わった後すぐに、そこから1000ms後に処理が実行されます。 そのため、1500msかかる処理でも、それが終わった後1000ms後に処理が実行されるため、被ることがありません。 そのため、システムに負荷をかけたくない場合はsetTimeoutもよく使われるので覚えておきましょう。

例外処理を使う

数字を入れることを想定しているけれども、文字列が入力された場合、エラーとなります。 開発者が意図していないことが起きることを例外といいます。 例外の処理には、try{}catchを使います。 tryには例外が起きそうな部分を書き、 catchには例外が起きたときの処理をかきます。 errorのeがcatchの引数としてよく使われます。 具体的な例をみてみましょう。 
'use strict';
  {
    const number = ’こんにちは'; //本来は数字がほしかった

    try {
      console.log(number * number * 2);
    } catch (e) {
      console.log(e);
    }

  }
setTimeout()とthisについては、次の記事を参考にしてみてください。

JavaScript

Posted by devsakaso