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()にも応用ができます。

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

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

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

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

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

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