Google Maps API・マイマップの使い方・活用法をご紹介しています。

function(){…}の無名関数ってなんか苦手という場合のコツ|setInterval/setTimeout

   

JavaScript関連のサンプルなどを見ているとよく出会う無名関数記述。
サンプルを参考にしながらソースを編集していくものの、
無名関数内部の処理のエラーが消えない・・・そんな経験はありませんか?
window.setIntervalで無名関数で引数を渡す必要がある場合などの、
参考になれば幸いです。

 

function(){…}の無名関数ってなんか書きにくい

まず、以下のようなサンプルです。

(引用)Animating Symbols  |  Google Maps JavaScript API  |  Google Developers

上記の無名関数の定義では、
window.setInterval()の第一引数に無名関数を渡し、
11行目で無名関数の終了=第一パラメータの終了。
その後、第二パラメータのインターバル値(20)を渡しています。

私は個人的にこの記述がどうも苦手なのです。
また「};)」なんかの閉じがズレていたりと編集がしにくかったりします。

上記を実行すると以下の通りの動作です。
これは以下の記事でご紹介したものです。


 

その他に以下の試行も行ったのですが、あまりいい結果ではありませんでした。

関数リテラルによる記述が編集しやすい

JavaScriptの関数については以下に詳しく書かれています。
ほんと今まで書いたことがないような書き方も紹介されていて、
実際にいろいろな書き方を試してみたいと思う次第です。

関数と関数スコープ – JavaScript | MDN

実際の検証結果は以下になりますが、

ここでの記述をご紹介します。

上記のサンプルソースを以下のように変更しています。

 

 

animateCircle()関数はシンボルのアニメーションを開始するための
関数として定義し、呼ばれるものです。

その内部でvar anonyfunc = function() {・・・}として、
関数リテラルとして変数に格納しています。

最後に、

window.setInterval(anonyfunc, 20);

として、window.setInterval()の引数として変数を渡します。

引数自体に無名関数を突っ込む書き方よりも、
なんとなく、別で記述されている方が、後々触りやすい感じがしませんか?

こうした書き方を適宜利用すると、
パラメータが必要な今回のようなケースも綺麗に表現することが出来ると思います。

パラメータなんて渡してないだろって?
ちゃんと渡してますよ。

 

詳細と実際の動作サンプルは以下になります。

 

こうした記述はwindow.setInterval()だけでなく、
マーカーを上から順に落として表現するような際に利用する、
window.setTimeout()にも応用ができます。

 


 - 小技

コンテンツ
すべて展開 | すべて省略

  関連記事

eye_gmap
Googleってやっぱりスゲーなと思うアイコン表示の仕組み|Googleマイマップ

GoogleMyMaps(Googleマイマップ)が新しくなり、 地図上に表示す …

eye_gmap
誰かが作成した有益なGoogleマイマップを検索する方法

どこかで誰かが作成してくれたGoogleMyMaps(Googleマイマップ) …