【即時関数&タイマー処理(setInterval,setTimeout)】JavaScriptのお勉強

即時関数とは

その場で関数を定義して，直後に使いたいときなどに使う．

書き方

即時関数.html

    /*
      即時関数
    */
    (function plus(number) {
      var x = 10,
          y = 5;
      console.log(x + y + number);
    })(20);

即時関数.html

   /*
     定義後即座に呼び出すので関数名を定義しなくてもいい
   */
    (function (number) {
      var x = 10,
          y = 5;
      console.log(x + y + number);
    })(20);

実行結果

これをscriptタグの中で実行すると

こんな感じでコンソールされるよ．便利．

どういうときに使うのか

• 人が作ったソースコードをいじりたいとき，または人に渡すとき干渉し合わないようにするため．

タイマー処理

setIntervalとsetTimeoutという関数がある．
setIntervalが一定時間ごとにある処理を繰り返す．
setTimeoutが一定時間後にある処理を一回実行するというもの．

書き方

showという関数を繰り返し実行する場合

setInterval.html

    var i = 0;
    function show() {
      console.log(i++);
    }
    setInterval(function() {
      show();
    }, 1000);

最後にある数字の単位は[ms]なので今回は一秒ごとにiに1を足した数字が出てくる．

setTimeout.html

    var i = 0;
    function show() {
      console.log(i++);
      var tid = setTimeout(function() {
      show();
      }, 1000)
      if (tid > 3) {
        clearTimeout(tid);
      }
    }
    show();

setTimeoutはsetIntervalと違く，一回しか中身が実行されないので変数に入れてそのあとのif文で何回繰り返すか制御している．
clearTimeoutは繰り返すのをやめるという意味．

注意

• setIntervalは前の処理の結果を考えずに一定時間ごとに繰り返すのでブラウザが耐え切れずクラッシュするおそれあり．
• setTimeoutは前の処理が終了してから実行するので安心．

最後に

色がないのでもう少し色を付けくわえたら見やすいかも．