window.setInterval x Animating Symbols の記述方法検証
GoogleMapsAPIを利用していてアニメーション効果を利用する際に、
利用する「window.setInterval()」関数。
この「window.setInterval()」関数を利用する際に、
セットで使われてくる無名関数の処理が、私にはどうしても見にくい。
その為、どうにかメンテナンスしやすく、
忘れにくい記述はないものかと試行錯誤を行った記録です。
window.setInterval
「window.setInterval()」については以下のドキュメントが便利です。
概要
一定の遅延間隔を置いて関数を繰り返し呼び出します。
構文
ここで、
intervalIDは clearInterval に渡すことのできる固有のインターバル ID です。funcは繰り返し呼びたい関数です。- もう一つの構文の
codeは、繰り返し呼び出したいソースコードの文字列です。delayは、setInterval()がfuncを呼び出す前に待つべき時間です。ミリ秒(1/1000 秒)単位で指定します 。最初の構文で関数にパラメータを付加したものは、Internet Explorer では動作しないので注意してください。
そして、この関数をGoogleMapsAPIで利用する例が、
ポリラインシンボルアニメーションの効果を実現する場合です。
以下のようなサンプルです。
中程に無名関数をwindow.setInterval()の引数に渡しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Use the DOM setInterval() function to change the offset of the symbol // at fixed intervals. function animateCircle(line) { var count = 0; window.setInterval(function() { count = (count + 1) % 200; var icons = line.get('icons'); icons[0].offset = (count / 2) + '%'; line.set('icons', icons); }, 20); } |
（引用）Animating Symbols | Google Maps JavaScript API | Google Developers
サンプルソースの動作確認
実際にサンプルソースをそのまま導入して、動作の確認をしています。
別関数化の試行
せっかくの無名関数を、新しく名前を定義して関数化し、
window.setInterval()に渡すことを試行してみました。
しかし、新しく定義した関数でパラメータを要求するような記述の場合、
IEとの互換性を保たせるのが困難だと判明しました。
結果として、以下の方法はうまく解決ができませんでした。
関数リテラルの利用（完了）
関数化案がうまくいかなかったこともあり、
どうにか読みやすく記述する方法として関数リテラルの使用を検討しました。
結果として、無名関数自体は利用していますが、
全体として可読性が増して、
メンテナンスがしやすい（処理がイメージしやすい）ようになったと感じます。
私的にはこの記述が理解しやすくて気に入っています。
当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。
当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。
申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。
コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。
記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook
運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。
公開日：
