今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

JavaScript アニメーション管理にどうぞ! 数秒後に実行。 delayedCallメソッド

f:id:sudara_bluse:20171020183550p:plain

JavaScriptで数秒後に処理を実行したい時、

hoge.js
setTimeout(function(){
    console.log("2秒後に実行!");
}, 2000);

のようにsetTimeoutを使うと思いますが、
ミリ秒が直感的でないし、0を3つ書くのが
めんどくさいなと思っていたところ、
こんな関数を作ってるコードを発見しました。

hoge.js
delayedCall(2,function(){
    console.log("2秒後に実行!");
});


// 数秒後に実行メソッド
function delayedCall(second, callBack){
  setTimeout(callBack, second * 1000);
}

 

直感的!
そんなにタイプ数は変わりませんが、
個人的にお気に入りです!なんかオシャレだし。

フレームアニメーションの時とかに使ってます。

hoge.js
$(function(){
    animateTo('intro');
});

// アニメーション管理
function animateTo(frameName) {
  switch (frameName) {
    case 'intro':
      delayedCall(1, function(){
          // なんかアニメ
      });
      animateTo('frame1');
      break;
    case 'frame1':
      delayedCall(1, function(){
          // なんかアニメ
      });
      animateTo('frame2');
      break;
    case 'frame2':
      delayedCall(3, function(){
          // なんかアニメ
      });
      break;
  }
}

// 数秒後に実行メソッド
function delayedCall(second, callBack){
  setTimeout(callBack, second * 1000);
}