スタートページJavascriptCANVAS

アニメーション(3)疑似sleep機能

アニメーション(1)で示した setInterval()/clearInterval() は、繰り返しの内部には記述できないなど、利用しにくいものでした。アニメーションには、任意の箇所に記述できる sleep() のような関数があると便利です。ところが、Javascriptの標準仕様にはないので自作する必要があります。


人手介入による遅延

画面表示のたびにカウンタを増していき、立て続けにクリックさせることによりアニメーション的な効果を実現することができます。例えば、ループ内部で次のように記述します。
    count++;
    if (count % interval == 0) {
      var itval = prompt("表示間隔の指定", interval);       interval = eval(itval);
    }
    y = x*(x-1)*(x-2);
    drawLine(x0,y0, x,y, "white", 4);

しかしこれでは、人手の介入が必要なので不適切です。

自動遅延

sleep()機能を実現する最も単純な方法は、非常に時間のかかる処理を実行させることですが、近年のパソコン機能は非常に高速なので効果がないこと、環境により遅延時間が異なることなど不適切です。

Javascriptの標準機能に、
    t1 = new Date().getTime(); があります。これにより、現在の時刻をt1に取り込むことができます。
 これを用いて、次のようにすれば、dt時間だけ遅延させることができます。
    while( t2 < t1 + dt ) {
      t2 = new Date().getTime();
    }

 具体的には、ループの部分を次のように記述します(★)。
    var t1 = new Date().getTime();
    var t2 = 0;
    alert("2回目以降「このページ~」にチェックを入れてください");
    while( t2 < t1 + dt ){
      t2 = new Date().getTime();
    }

私は理由を理解できないのですが、次の事項に留意してください。
 Google Chrome以外のブラウザだと、遅延が起こりません。
 alert()がないと、遅延が起こりません。この割り込みによる時間遅れが影響しているのでしょうか。

関数 sleep()

上の★の部分を、関数 sleep() として、xycoordinate.js に加えました。ループ部の記述は次のとおりです。これなら違和感がないでしょう。
    dt = 20;
    for (x=xmin; x<=xmax-dx; x=x+dx) {
      sleep(dt);
      y = x*(x-1)*(x-2);
      drawLine(x0,y0, x,y, "white", 4);
      x0 = x;
      y0 = y;
    }