別関数化案：Animating Symbols|Google Maps JavaScript API|Google Developers

さて基本的なアニメーションシンボルのサンプルソースから、
より見やすくメンテナンスしやすい書き方はないものかと、
無名関数を普通の関数に置き換えて、window.setInterval()で呼び出す処理。
別の関数に置き換えようとなった場合の案としての動作をご紹介します。

なお、本投稿は以下からの続きです。

提示サンプル例：Animating Symbols|Google Maps JavaScript API|Google Developers

概要

1 別関数化案：Animating Symbols
- 1.1 無名から別関数化定義へ

別関数化案：Animating Symbols

上記リンク先でGoogle Developers提示のサンプルソースの動作確認をしました。
その際に出てきた無名関数による処理は、

window.setInterval()の第一パラメータに処理として無名関数を渡し、
第二パラメータでインターバル実行間隔(msec)を指定します。

結果、「window.setInterval(function() {．．．}, 20);」と、
無名関数の処理が長々と書かれた後、第二パラメータがくるという形になります。

そこで、無名関数をよりすっきりさせるべく、別関数化を試しています。

無名から別関数化定義へ

無名関数で定義している部分を別関数にすると、
インターバル処理自体の呼び出しはすっきりとします。
以下のような記述です。

ただし、var g_count = 0;部分を、
関数の外部に記述しグローバル化する逃げを使っています。

そして「window.setInterval(wrap, 20, p_line);」の第三パラメータに対して、
「function wrap(w_line){}」に渡すパラメータ(p_line)を指定しています。

単純に関数化と言っても、実際動作するように記述するのは面倒なものです。
しかも、このままではIEでは動作しないと言う互換性の問題も残ります。（後述）

var g_count = 0;		//GLOBAL
function animateCircle(p_line) {
	    window.setInterval(wrap, 20, p_line);
}
function wrap(w_line){
	g_count = (g_count + 1) % 200;
	var icons = w_line.get('icons');
	icons[0].offset = (g_count / 2) + '%';
	w_line.set('icons', icons);
}

var g_count = 0; //GLOBAL

function animateCircle(p_line) {

window.setInterval(wrap, 20, p_line);

}

function wrap(w_line){

g_count = (g_count + 1) % 200;

var icons = w_line.get('icons');

icons[0].offset = (g_count / 2) + '%';

w_line.set('icons', icons);

}

上記のサンプルは以下で表示しています。

<script type="text/javascript">

function initMap() {
	  var map = new google.maps.Map(document.getElementById('map2'), {
	    center: {lat: 20.291, lng: 153.027},
	    zoom: 6,
	    mapTypeId: google.maps.MapTypeId.TERRAIN
	  });

	  // Define the symbol, using one of the predefined paths ('CIRCLE')
	  // supplied by the Google Maps JavaScript API.
	  var lineSymbol = {
	    path: google.maps.SymbolPath.CIRCLE,
	    scale: 8,
	    strokeColor: '#393'
	  };

	  // Create the polyline and add the symbol to it via the 'icons' property.
	  var line = new google.maps.Polyline({
	    path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
	    icons: [{
	      icon: lineSymbol,
	      offset: '100%'
	    }],
	    map: map
	  });

	  animateCircle(line);
}
var g_count = 0;		//GLOBAL
function animateCircle(p_line) {
	    window.setInterval(wrap, 20, p_line);
}
function wrap(w_line){
	g_count = (g_count + 1) % 200;
	var icons = w_line.get('icons');
	icons[0].offset = (g_count / 2) + '%';
	w_line.set('icons', icons);
}

google.maps.event.addDomListener(window,"load",initMap);
$('#ver').text(google.maps.version);
</script>

function initMap() {

var map = new google.maps.Map(document.getElementById('map2'), {

center: {lat: 20.291, lng: 153.027},

zoom: 6,

mapTypeId: google.maps.MapTypeId.TERRAIN

});

// Define the symbol, using one of the predefined paths ('CIRCLE')

// supplied by the Google Maps JavaScript API.

var lineSymbol = {

path: google.maps.SymbolPath.CIRCLE,

scale: 8,

strokeColor: '#393'

};

// Create the polyline and add the symbol to it via the 'icons' property.

var line = new google.maps.Polyline({

path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],

icons: [{

icon: lineSymbol,

offset: '100%'

}],

map: map

});

animateCircle(line);

}

var g_count = 0; //GLOBAL

function animateCircle(p_line) {

window.setInterval(wrap, 20, p_line);

}

function wrap(w_line){

g_count = (g_count + 1) % 200;

var icons = w_line.get('icons');

icons[0].offset = (g_count / 2) + '%';

w_line.set('icons', icons);

}

google.maps.event.addDomListener(window,"load",initMap);

$('#ver').text(google.maps.version);

</script>

window.setInterval(wrap, 20, line);の第三パラメータにより、インターバル呼び出しを行いたい関数に対して渡すパラメータ指定は、 IEでは動作しません。 これはリファレンスにも明記されています。その為、無名関数から関数を呼び出す形に書き直しても、 IEを対象外とするデグレードの問題が残ってしまいます。

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

<code class=" language-html">intervalID = window.setInterval(func, delay[, param1, param2, ...]); intervalID = window.setInterval(code, delay);</code>

1
2

<code class=" language-html">intervalID = window.setInterval(func, delay[, param1, param2, ...]);
intervalID = window.setInterval(code, delay);</code>

ここで、

intervalID は clearInterval に渡すことのできる固有のインターバル ID です。

func は繰り返し呼びたい関数です。

もう一つの構文の code は、繰り返し呼び出したいソースコードの文字列です。

delay は、setInterval() が funcを呼び出す前に待つべき時間です。ミリ秒(1/1000 秒)単位で指定します。

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

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

このままでは、元から提示されていた無名関数による処理を、
壊しデグレードさせただけになってしまっています。

別関数化すらできていないと言う状況です。
さらにグローバル変数まで増やし、いいことは全くありません。

そこで次に無名関数を関数リテラルとして記述し、
関数の入れ子構造を適用する案です。

関数リテラル入れ子案：Animating Symbols|Google Maps JavaScript API|Google Developers

当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。

当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。

申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。

コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。

記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook

運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。