# プログラミング全般＞開発日記

JavaScriptのsetInterval()に引数ありの関数を渡す場合

備忘録。
先日の記事の続きになりますが、アマちぇっき（※ 申し訳ありませんが、あまチェキはサービスを終了しました。）の写真ズームイン拡大の部分には、JavaScriptのsetInterval()を用いています。setInterval()は、渡された関数を、一定時間おきに繰り返し呼び出す関数です。

ロジックとしては・・・

１．最初は大きな写真のwidth（幅）、height（高さ）を”0″に設定。
２．大きな写真のwidth（幅）、height（高さ）を取得し、それぞれ1/10ずつ拡大するzoomUp()関数を独自定義する。
３．zoomUp()を、setInterval()で一定時間おきに呼び出すことで、段々と写真を1/10ずつ拡大していく。
４．写真の大きさが拡大しきったら、setInterval()をクリアして拡大をストップする。

以上を小さな写真へのオンマウスイベントで捉えて、イベントハンドラーを呼び出すといった感じです。

zoomUp()を、setInterval()で、呼び出す際に、zoomUp()に引数をいくつか渡したかったのですが、ここが足止めをくらってつまづいたポイントでした。zoomUp(arg1, arg2, arg3)のようにして、setInterval()で呼び出したかったのですけど、これが動かない。（arg1, arg2, arg3は変数の引数）
具体的には、最初・・・

setInterval("zoomUp(arg1, arg2, arg3)", 16);
または、
setInterval(zoomUp(arg1, arg2, arg3), 16);

と書いて試したのですが、これが動かない。16/1000秒ごとに、zoomUp()をsetInterval()で呼び出して繰り返し実行し、滑らかに写真拡大するのが期待した動作です。何で動かないのか、最初は本当に分かりませんでした。理論上は、これで動くはずだという先入観もありました。
PHPの場合・・・

funcA(funcB($arg1, $arg2, $arg3), $arg4);

という書き方で、普通に動いてくれますが、setInterval()では動きません。
解決のヒントになったのは、以下のサイト。

文字のフェードイン・フェードアウト

ここで、setTimeout()というsetInterval()に似たjs標準関数の使い方がサンプルされていますが、setTimeout()を使う場合・・・

setTimeout("strFade('" + str + "')",itv);

のように書かないといけないとのこと。setInterval()もこれと同じでした。

setInterval("zoomUp('" + arg1 + "', " + arg2 + ", " + arg3 + ")", 16);

のように書いたところ、無事に動くようになりました。パチパチパチ！ewebさん、本当に助かりました。有難うございました。

setInterval()の内側には、引数の値が文字列の場合は必ずクオートで囲み、数値の場合はクオートで囲んではいけない、という決まりがあるようです。というか、これ全部の関数に共通の決まりみたいですけど。sleep()がなかったり、このへんの関数への引数の渡し方とかも、PHPとはちょっと違うなぁ。変数のスコープなんかもPHPとJavaScriptでは違いますし、先入観を持つといけませんね。

知っていればなんてことはない、たったこれだけのことでしたけど、この部分が一番手間取った箇所です。解決するのに、時間も数時間かかってしまいました。やっぱり、プログラミングは経験がものを言いますし、細かいところで言語間の違いってたくさんありますね。でも、やはり自力で解決できると自信につながりますし、実装できたときの嬉しさは何とも言えません。

JavaScriptはPHPより難しいけど、はるかに面白いです。

参考になったサイト。

ミスティーネット･JavaScript講座
 オンマウスで画像を拡大表示
 文字のフェードイン・フェードアウト – JavaScript

<< 前の記事 : アマちぇっき、オープンしました