Image の onerror でゲームループ作ってみる


色々調べものしてたら JSDeferred を高速化する (試し中) – 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 – subtech という記事に辿り着いて、その中で

setTimeout は interval を 0 に設定しても最低でも 10msec はかかってしまうため、next() や、それを使っている call(), loop() を何度も呼びまくるケースでは ブラウザが全くアイドルであっても 10msec * next() の回数分はかかってしまいます。
JSDeferred を高速化する (試し中) – 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 – subtech

とあって、気にした事無かったけど確かにそうだなという指摘があり、解決法として (new Image).onerror を使う、というお話になっていました。

なるほど賢い人もいたものだ、と思いながら面白そうなので自分も試しにゲームで使うようなループを作ってみました。


var TTT = (function(){
	var clock = new Image();
	clock.onerror = function(){
		try{
			TTT.timer();
			clock.src = " ";
		}catch( e ){
			console.log( e );
		}
	}
	return {
		start:function(){
			clock.src = " ";
		}
	}
})();

で、TTT.timer に適当な関数を突っ込んでおいて TTT.start() を呼んでやると力の限りの速度で繰り返される、という危なっかしい代物です。

http://www.grkt.com/js/ttt/ に、上のやつを使って、前の処理からの経過時間(ミリ秒)をタイトル部分に表示するやつ作ってみました。うちの iMac だとほぼ 0 か 1 。CPU 使用率半端ない!やばい!

というわけで、使用しないで下さい。

気になった事
・リンク先のコードで使ってる img.src = “data:,/ _ / X”; ってなんだろう。
・あと switch( true ){ … } っていうのも素晴らしい