追記2:int32_t様のコードで、やりたいことが出来ましたので、記録として残しておきます。
JavaScript
1async function sleep(sec) { 2 const startTime = performance.now(); 3 return new Promise(resolve => { 4 const sleepInternal = tick => { 5 if (startTime + sec * 1000 <= tick) { 6 resolve(); 7 } 8 requestAnimationFrame(sleepInternal); 9 }; 10 requestAnimationFrame(sleepInternal); 11 }); 12}
変更点
1. function
の記載がなかったので、最新のJSはこういう構文なのかな?と思い試してみましたがやっぱり必要だったようなので追加
2.繰り返しの再帰呼び出しメイン処理の再帰関数recursive_show_marked()
をasync
にして、await sleep(2)
するようにした
3.再帰関数を最初に呼び出すイベントハンドラもasync
にして、await recursive_show_marked()
するようにした
(イベントハンドラがasync
でいいのかと一瞬悩みましたが、これでいいはずと修正)
CODEPENも、修正済みなので、ご興味があればご確認ください。
追記2:ここまで
追記:皆様のアドバイスを参考にsleep関数を作り変えてみました
JavaScript
1 var start; 2 var sleep_flag = false; 3 var id_rAF; 4 function sleep(sec) { 5 // 指定秒数スリープさせる 6 if (sleep_flag == false) { 7 console.log("Sleeping"); 8 start = new Date().getTime(); 9 sleep_flag = true; 10 } 11 12 let progress = new Date().getTime() - start; 13 let wait_time = sec * 1000; 14 if (progress < wait_time) { 15 id_rAF = window.requestAnimationFrame(sleep.bind(null, sec)); 16 } 17 18 id_rAF = window.requestAnimationFrame(sleep.bind(null, sec)); 19 cancelAnimationFrame(id_rAF); 20 console.log("Sleeping Break!!"); 21 sleep_flag = false; 22 return; 23 }
以上の様に、作り変えた所、結果は表示されるにはされるのですが、
別の問題が発生してしまいました
- 内部で指定秒数まっているつもりなのですが、
wait_time
分待ってくれない - 直前の
requestAnimationFrame
のIDでcancelAnimationFrame
を行っているはずなのに、
requestAnimationFrameが終了せず、コンソールにsleepのログが出続ける
という、新たな問題に直面しています。CODEPENのコードも直してあります。
ご覧いただけると幸いです。
申し訳ありませんが、再度アドバイスを頂ければ幸いです。
追記ここまで
再帰呼び出しのたびに画面も更新していきたい
現在OJTで、初心者のJavaScriptでの課題を指導していますが、思った動作にならず、又、当方の再帰呼び出しへの理解が浅かったため
有効なアドバイスが出来ず、立場上困ったことになっています。
当方の理解レベルは下記のリンクにあったコード程度の理解で、今までは特に困ったことはありませんでしたが、
今回はより込み入ったコードになっており、画面更新が適宜行われません。
参考サイト:【初心者】JavaScriptでストップウォッチの作り方
申し訳ありませんが、諸先輩方のお知恵をお借りしたく質問させていただきます。
OJTの課題は5×5マスのゲーム盤に上から落としていき、ぷよぷよもどきのゲームを作ってもらっています。
マニュアルモードは完成したのですが、最適解を求めるために再帰呼び出しを使ってコードを書いた所、
途中経過が表示されません、デバッガーでブレイクポイントをはって実行するとちゃんと画面更新されます。
何がいけないのか、どこがダメなのか、どうすれば良いのかのアドバイスをいただけたら幸いですm(_ _)m
実現したいこと
「自動進行機能」をONにしてから最初の駒を落とすと途中経過が出ません。
ブレイクポイントをはると途中経過を確認できます。
ブレイクポイントをはらなくても適宜画面更新されるようにしたい
発生している問題
そのまま実行すると、終了時のみ画面表示される。
途中で、ブレイクポイントをはって実行していくと適宜画面表示される。
再起呼び出しを行っている関数はrecursive_show_marked()
です。
sleep関数
に入ってすぐにブレイクポイントをはって、止めながら進めると、適宜画面更新されます。
コードが長くて入らなかったので、CODEPENに記載しました
CODEPEN
申し訳ありませんが、諸先輩方のお知恵を拝借出来たら幸いです。
回答4件
あなたの回答
tips
プレビュー