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

window.setInterval x Animating Symbols の記述方法検証

GoogleMapsAPIを利用していてアニメーション効果を利用する際に、
利用する「window.setInterval()」関数。
この「window.setInterval()」関数を利用する際に、
セットで使われてくる無名関数の処理が、私にはどうしても見にくい。
その為、どうにかメンテナンスしやすく、
忘れにくい記述はないものかと試行錯誤を行った記録です。

 

window.setInterval

「window.setInterval()」については以下のドキュメントが便利です。

概要

一定の遅延間隔を置いて関数を繰り返し呼び出します。

構文

ここで、

  • intervalIDclearInterval に渡すことのできる固有のインターバル ID です。
  • func は繰り返し呼びたい関数です。
  • もう一つの構文の code は、繰り返し呼び出したいソースコードの文字列です。
  • delay は、setInterval()funcを呼び出す前に待つべき時間です。ミリ秒(1/1000 秒)単位で指定します 。

最初の構文で関数にパラメータを付加したものは、Internet Explorer では動作しないので注意してください。

(引用) window.setInterval – Web API インターフェイス | MDN

 

そして、この関数をGoogleMapsAPIで利用する例が、
ポリラインシンボルアニメーションの効果を実現する場合です。

以下のようなサンプルです。
中程に無名関数をwindow.setInterval()の引数に渡しています。

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

サンプルソースの動作確認

実際にサンプルソースをそのまま導入して、動作の確認をしています。

別関数化の試行

せっかくの無名関数を、新しく名前を定義して関数化し、
window.setInterval()に渡すことを試行してみました。

しかし、新しく定義した関数でパラメータを要求するような記述の場合、
IEとの互換性を保たせるのが困難だと判明しました。

結果として、以下の方法はうまく解決ができませんでした。

関数リテラルの利用(完了)

関数化案がうまくいかなかったこともあり、
どうにか読みやすく記述する方法として関数リテラルの使用を検討しました。

結果として、無名関数自体は利用していますが、
全体として可読性が増して、
メンテナンスがしやすい(処理がイメージしやすい)ようになったと感じます。

私的にはこの記述が理解しやすくて気に入っています。

 


公開日:

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