スタートページ＞ Javascript＞ CANVAS＞ アニメーション

アニメーション（３）
疑似sleep機能（async, await, Promise）

JavaScript には sleep関数 がありません。同様な機能を実現するために、async, await, Promise があります。

遅延がない場合のソースコード

　　// フォーム入力の取得
　　:
　　// ＸＹ座標軸の設定
　　:
　　//　初期値設定
　　dx = (xmax-xmin)/100;
　　x = xmin;
　　x0 = x;
　　y0 = eval(f);
　　// グラフ
　　while(x <= xmax) {
　　　　x = x + dx;
　　　　y = eval(f);
　　　　drawLine(x0,y0, x,y, "white", 4);
　　　　x0 = x;
　　　　y0 = y;
　　}

graph1 のソースコード

　　:
　　// グラフ
　　async function 遅延() {　// ア
　　　　while(x <= xmax) {
　　　　　　await new Promise(s => setTimeout(s, interval))　// イ
　　　　　　x = x + dx;
　　　　　　y = eval(f);
　　　　　　drawLine(x0,y0, x,y, "white", 4);
　　　　　　x0 = x;
　　　　　　y0 = y;
　　　　}
　　}
　　遅延();　// ウ

• 遅延の記述が１か所で、すべて同じ遅延時間のときは、これが最も簡素です。
• ア：ループが遅延する範囲です。関数ですが、async が必要です。
• イ：ややこしいですが、この通りに記述してください。
  interval は入力Form で与えました。
  s の名称は任意です。遅延時間後の処理（下の青部分）の意味だと思ってください。
  逆にいえば、処理を 遅延() 内に記述する必要があります。
• ウ：遅延() が関数なので、これを忘れてはいけません。
  また、この前後に命令を記述できません。

graph2 のソースコード

　　　　:
　　// グラフ
　　function sleep(ms) {
　　　　return new Promise(s => setTimeout(s, ms));　// エ
　　}
　　async function 遅延() {
　　　　while(x <= xmax) {
　　　　　　if ( (x>0) && (x<2) ) await sleep(100);　// オ
　　　　　　else await sleep(20);
　　　　　　x = x + dx;
　　　　　　y = eval(f);
　　　　　　drawLine(x0,y0, x,y, "white", 4);
　　　　　　x0 = x;
　　　　　　y0 = y;
　　　　}
　　}
　　遅延();

• 遅延する処理が複数ある場合や、遅延時間が異なる場合の記述方法です。
• イの機能をエとオに分離します。
• オのように、条件により遅延速度を変えています。
• エ：複数の遅延速度を関数としてまとめました。イと同様、この通りに記述してください。