[JavaScript 高速化] 初期設定やなんやかんやもイベントが起きるまでやらん！

参考にした記事が2007年と2008年のものなので、今では古いテクニックなのかもしれんけど…

最近、スマートフォン向けのサイトを作った。
PC向けと比べてネットワークが細いのと処理速度が遅いことを考えて、より高速化に対してシビアにならんといかん。

で、ボタンをクリックしたら、画面下からシュッとモーダルウインドウが出るような機能をつけた。
そのモーダルウィンドウ内でも、あれやこれやと機能がついてる。
でも、そのボタンは押されないかもしれないっていうサブ的な機能。


この機能の設定をJavaScript読み込み時にやっても使われなかったりする

なので、できればボタンがクリックされるまで、機能設定も動かないようにしていたい。

要は最初の1回だけ初期設定機能を付けて、2回目以降はそれを動かさないようにしたい。

パッと思いつくのが↓(ダメパターン)
var flag = false;
var kinou = function(){
  if(flag === false){
    //初期設定処理

    //フラグを切り替え
    flag = true;
  }

  //通常の処理
}

まあ、これでも動くんだけど、flagって変数が必要になるのと、関数呼び出すたびに条件判定をする必要がある。
こんなときには「Lazy Function Definition Pattern」
直訳すると「怠けた機能の定義様式」

var kinou = function(){
  //初期設定処理をここに書く

  //ここで関数上書き
  kinou = function(){
    //通常処理
  }

  //通常処理を起動
  kinou();
}

1度関数が呼ばれると、初期設定をする。
その後、関数内でその関数を上書き。初期設定機能はなくなって、通常機能のみの関数になる
2回目以降は、通常機能のみが動くようになる

「関数の外の変数を見にいかなくなる ＆ 条件分岐がなくなる」より高速になるってことね。

「高速化」じゃなくて「早漏化」っていってみるととたんにやる気がなくなる。


参考：
JavaScriptの動作を軽くするための工夫
Lazy Function Definition Pattern(英文)