関数Aとその関数内に存在する関数Bの両方に、第一引数で指定した関数を第二引数秒後に実行し続けるsettimeout()を指定したとします。
設定秒数は、関数Aのほうが0.0166秒、関数ない関数Bの設定秒数が1秒とし、関数内関数Bは、関数A内で実行します。関数内関数Bを実行した時点でsettimeout(B,1000)も実行されています。
関数内関数Bを実行した後、関数Aにも設定したsettimeout(A,1000/60)を実行します。
ここで一つ疑問が生まれました。
関数Aが実行されて、その関数A内にある関数Bも実行されます。このあとsettimeoutで関数Aが0.01666...秒後、関数内関数Bが1秒後に実行されていきます。
秒数だけ見ると関数Aのほうが早く実行されるのは分かりますが、一秒後に実行される関数Bとの関係性が分かりません。最初に関数A、Bが実行されると、次の動作は、Aが0.0166秒後にAの処理を実行し、
Bも1秒後にBを実行しますが、その間Aが0.0166秒後に実行されるのですから、0.01666秒後に再度AとBが実行されます。ちょっと頭が混乱しますがBがだぶっているようにみえます。
試しに上記のような処理を作ってみると、明らかにAの設定秒数である0.01666秒で関数Bが動いているようにみえました。
恐らくですが、関数Bのsettimeoutで1秒後に関数Bが実行される前にAが何かしらの影響を与えているのでは、と思っています。
しかしこれといった答えを出せているわけではないですし、推測の域を出ないですし、頭がこんがらがってくるのでこれは、もう質問サイトに投稿するしかないだろう、ということで投稿しました。
いったいこのへんは、どうなっているのでしょうか。
//①canvas要素の取得 var canvas = document.getElementById("canvas"); //②canvas要素から描画コンテキストの取得 var ctx = canvas.getContext("2d"); //1秒間に60回分(つまり1回につき0.01666秒、描画している)、長方形を描画している //16.6ミリ秒(0.01666...秒) var interval = Math.floor(1000/60); var x=5; var y=5; //測量 var count = 0; //console.time("time"); function draw() { ctx.clearRect(0,0,500,500); x+=5; y+=5; //単純に数字を既定の数まで加算しているだけなので厳密に時間を計っているわけではないから、これであっているのだろうか。 //1000ミリ秒後に再度、siraberuを実行するので1、2、3、4…と秒数が表示されるのかと思いきや、図形が描画される速さと同じ速さで秒数を測定してしまう //drewと何か影響があるのか・・・ function siraberu(){ if(count<=20) { document.getElementById("count").textContent= count+"秒経った"; setTimeout(siraberu,1000); count += 1; } } //パスを初期化。ここでいうパスとは、領域の境界線のようなものだという。 ctx.beginPath(); //塗りつぶす色を指定。 ctx.fillstyle = "#99ff66";//緑色 //長方形のパスを作成。第一引数がx座標(横)、第二引数がy座標(縦)、第三引数が横幅、第四引数が高さだ。座標というのは、ブラウザの表示領域のX軸とY軸のことだ。0,0にすれば、ブラウザの左上に表示される。 ctx.rect(x,y,100,200);//rectは、rectangel(長方形、矩形)の略である。 //fillで長方形を塗りつぶす。何も指定しないと黒色となる。 ctx.fill();//fillは、容器や場所などをいっぱいにする、満たすという意味だ。 //最後にbeginPathで開始したパスを閉じる。 ctx.closePath(); siraberu(); //console.time("time2"); setTimeout(draw,interval); //console.timeEnd("time2"); } //描画し終えてから秒数を測定してしまう var count2 =0; function siraberu2(){ if(count2<=20) { document.getElementById("count2").textContent= count2+"秒立った"; setTimeout(siraberu2,1000); count2 += 1; } } draw(); //console.timeEnd("time"); siraberu2();
回答2件
あなたの回答
tips
プレビュー