callbackを実装したい

Question

###前提・実現したいこと
画面が黒から白へフェードアウトした後、関数が実行されるようなプログラムを作ろうとしています。
callbackを実装しようと思ってプログラムを書いたのですが、callbackが実行されず、オブジェクトが存在しないと言われました。コードには、スペルミスも何もないはずなのですが、なぜ動かないのかわかりません。どうすれば、callbackが動くようになるのでしょうか？
###発生している問題・エラーメッセージ

SCRIPT5007: Object expected
sample.js (28,5)

###該当のソースコード

canvas1 = document.createElement("canvas");
canvas1.width = 1200;
canvas1.height = 600;
document.body.appendChild(canvas1);
layer1 = canvas1.getContext("2d");


animation = function (ctx) {
	this.myColor = new Array(
		"#000000", "#101010", "#202020", "#303030",
		"#404040", "#505050", "#606060", "#707070",
		"#808080", "#909090", "#A0A0A0", "#B0B0B0",
		"#C0C0C0", "#D0D0D0", "#E0E0E0", "#FFFFFF"
	);
	var myCnt = 0;
	var local_myColer = this.myColor;
	myFade = function (callback) {
		if (myCnt != 16) {
			ctx.clearRect(0, 0, 100, 100);
			ctx.fillStyle = local_myColer[myCnt];
			ctx.fillRect(0, 0, 100, 100);
			var myTime = (myCnt == 0 || myCnt == 15) ? 1000 : 50;
			myCnt++;
			setTimeout("myFade()", myTime);
		} else {
				ctx.clearRect(0, 0, 100, 100);
				console.log(callback);
				callback();
		}
	}
}

aaa = function(){
	alert("実行しました");
}

animation(layer1);
myFade(aaa);

Answer 1

解決済みのようですが、別解を。

setTimeout の第三引数

最近の実装では setTimeout に第三引数を指定する事で、タイマー実行関数の引数として解釈されます。

setTimeout(myFade, myTime, callback);

Polyfill

IE9- では使えませんが、Polyfill を適用すればいいでしょう。

• WindowOrWorkerGlobalScope.setTimeout() - Web API インターフェイス | MDN

Re: meron-pan さん

Answer 2

setTimeoutメソッドに渡している内容に問題があるからです.

あなたのコード

setTimeout("myFade()", myTime);

では引数として渡したコード"myFade()"が評価された際, 関数myFadeに渡されるべき変数callbackが未設定になっているためエラーとなっています.

ですから

setTimeout(function(){myFade(callback)}, myTime);

のように, 繰り返し処理の際にもmyFadeに対して引数を設定します.

NOTE:
setTimeout関数にコード文字列を渡すのはあまりおすすめできません. eval関数と同様にメソッド呼び出しの都度コードが評価されるため, ブラウザ内部での最適化処理において極めて不利に働くからです.

Comments

[meron-pan]

回答ありがとうございます。setTimeoutの方がコードにミスがあったとは気が付きませんでした。返信が遅くなってしまい申し訳ありません。