2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#即時関数とは
その場で関数を定義して,直後に使いたいときなどに使う.
##書き方

即時関数.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タグの中で実行すると
image.png
こんな感じでコンソールされるよ.便利.

#どういうときに使うのか

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

#タイマー処理
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は前の処理が終了してから実行するので安心.

##最後に
色がないのでもう少し色を付けくわえたら見やすいかも.

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?