質問編集履歴
7
問題解決したので、どのようになったかを記録として追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,29 @@
|
|
|
1
|
+
### 追記２：int32_t様のコードで、やりたいことが出来ましたので、記録として残しておきます。
|
|
2
|
+
|
|
3
|
+
```JavaScript
|
|
4
|
+
async function sleep(sec) {
|
|
5
|
+
const startTime = performance.now();
|
|
6
|
+
return new Promise(resolve => {
|
|
7
|
+
const sleepInternal = tick => {
|
|
8
|
+
if (startTime + sec * 1000 <= tick) {
|
|
9
|
+
resolve();
|
|
10
|
+
}
|
|
11
|
+
requestAnimationFrame(sleepInternal);
|
|
12
|
+
};
|
|
13
|
+
requestAnimationFrame(sleepInternal);
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
```
|
|
17
|
+
変更点
|
|
18
|
+
１． ```function```の記載がなかったので、最新のJSはこういう構文なのかな？と思い試してみましたがやっぱり必要だったようなので追加
|
|
19
|
+
２．繰り返しの再帰呼び出しメイン処理の再帰関数```recursive_show_marked()```を```async```にして、```await sleep(2)```するようにした
|
|
20
|
+
３．再帰関数を最初に呼び出すイベントハンドラも```async```にして、```await recursive_show_marked()```するようにした
|
|
21
|
+
（イベントハンドラが```async```でいいのかと一瞬悩みましたが、これでいいはずと修正）
|
|
22
|
+
|
|
23
|
+
[CODEPEN](https://codepen.io/nekora/pen/KKeEVRe)も、修正済みなので、ご興味があればご確認ください。
|
|
24
|
+
|
|
25
|
+
### 追記２：ここまで
|
|
26
|
+
|
|
1
27
|
### 追記：皆様のアドバイスを参考にsleep関数を作り変えてみました
|
|
2
28
|
```JavaScript
|
|
3
29
|
var start;
|
6
CODEPENも修正した旨、追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -32,7 +32,8 @@
|
|
|
32
32
|
requestAnimationFrameが終了せず、コンソールにsleepのログが出続ける
|
|
33
33
|
|
|
34
34
|
|
|
35
|
+
という、新たな問題に直面しています。[CODEPEN](https://codepen.io/nekora/pen/KKeEVRe)のコードも直してあります。
|
|
35
|
-
|
|
36
|
+
ご覧いただけると幸いです。
|
|
36
37
|
|
|
37
38
|
**申し訳ありませんが、再度アドバイスを頂ければ幸いです。**
|
|
38
39
|
|
5
文章の体裁を変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,43 @@
|
|
|
1
|
+
### 追記：皆様のアドバイスを参考にsleep関数を作り変えてみました
|
|
2
|
+
```JavaScript
|
|
3
|
+
var start;
|
|
4
|
+
var sleep_flag = false;
|
|
5
|
+
var id_rAF;
|
|
6
|
+
function sleep(sec) {
|
|
7
|
+
// 指定秒数スリープさせる
|
|
8
|
+
if (sleep_flag == false) {
|
|
9
|
+
console.log("Sleeping");
|
|
10
|
+
start = new Date().getTime();
|
|
11
|
+
sleep_flag = true;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
let progress = new Date().getTime() - start;
|
|
15
|
+
let wait_time = sec * 1000;
|
|
16
|
+
if (progress < wait_time) {
|
|
17
|
+
id_rAF = window.requestAnimationFrame(sleep.bind(null, sec));
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
id_rAF = window.requestAnimationFrame(sleep.bind(null, sec));
|
|
21
|
+
cancelAnimationFrame(id_rAF);
|
|
22
|
+
console.log("Sleeping Break!!");
|
|
23
|
+
sleep_flag = false;
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
以上の様に、作り変えた所、**結果は表示されるにはされるのですが、
|
|
28
|
+
別の問題が発生してしまいました**
|
|
29
|
+
|
|
30
|
+
0. 内部で指定秒数まっているつもりなのですが、```wait_time```分待ってくれない
|
|
31
|
+
1. 直前の```requestAnimationFrame```のIDで```cancelAnimationFrame```を行っているはずなのに、
|
|
32
|
+
requestAnimationFrameが終了せず、コンソールにsleepのログが出続ける
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
という、新たな問題に直面しています。
|
|
36
|
+
|
|
37
|
+
**申し訳ありませんが、再度アドバイスを頂ければ幸いです。**
|
|
38
|
+
|
|
39
|
+
### 追記ここまで
|
|
40
|
+
|
|
1
41
|
### 再帰呼び出しのたびに画面も更新していきたい
|
|
2
42
|
|
|
3
43
|
現在OJTで、初心者のJavaScriptでの課題を指導していますが、思った動作にならず、又、当方の再帰呼び出しへの理解が浅かったため
|
|
@@ -32,43 +72,4 @@
|
|
|
32
72
|
|
|
33
73
|
申し訳ありませんが、諸先輩方のお知恵を拝借出来たら幸いです。
|
|
34
74
|
|
|
35
|
-
### 追記：皆様のアドバイスを参考にsleep関数を作り変えてみました
|
|
36
|
-
```JavaScript
|
|
37
|
-
var start;
|
|
38
|
-
var sleep_flag = false;
|
|
39
|
-
var id_rAF;
|
|
40
|
-
function sleep(sec) {
|
|
41
|
-
// 指定秒数スリープさせる
|
|
42
|
-
if (sleep_flag == false) {
|
|
43
|
-
console.log("Sleeping");
|
|
44
|
-
start = new Date().getTime();
|
|
45
|
-
sleep_flag = true;
|
|
46
|
-
}
|
|
47
75
|
|
|
48
|
-
let progress = new Date().getTime() - start;
|
|
49
|
-
let wait_time = sec * 1000;
|
|
50
|
-
if (progress < wait_time) {
|
|
51
|
-
id_rAF = window.requestAnimationFrame(sleep.bind(null, sec));
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
id_rAF = window.requestAnimationFrame(sleep.bind(null, sec));
|
|
55
|
-
cancelAnimationFrame(id_rAF);
|
|
56
|
-
console.log("Sleeping Break!!");
|
|
57
|
-
sleep_flag = false;
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
```
|
|
62
|
-
以上の様に、作り変えた所、**結果は表示されるにはされるのですが、
|
|
63
|
-
別の問題が発生してしまいました**
|
|
64
|
-
|
|
65
|
-
0. 内部で指定秒数まっているつもりなのですが、```wait_time```分待ってくれない
|
|
66
|
-
1. 直前の```requestAnimationFrame```のIDで```cancelAnimationFrame```を行っているはずなのに、
|
|
67
|
-
requestAnimationFrameが終了せず、コンソールにsleepのログが出続ける
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
という、新たな問題に直面しています。
|
|
71
|
-
|
|
72
|
-
**申し訳ありませんが、再度アドバイスを頂ければ幸いです。**
|
|
73
|
-
|
|
74
|
-
|
4
アドバイスを受けてコードを変えてみたが新たな問題が発生したので、追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -32,5 +32,43 @@
|
|
|
32
32
|
|
|
33
33
|
申し訳ありませんが、諸先輩方のお知恵を拝借出来たら幸いです。
|
|
34
34
|
|
|
35
|
+
### 追記：皆様のアドバイスを参考にsleep関数を作り変えてみました
|
|
36
|
+
```JavaScript
|
|
37
|
+
var start;
|
|
38
|
+
var sleep_flag = false;
|
|
39
|
+
var id_rAF;
|
|
40
|
+
function sleep(sec) {
|
|
41
|
+
// 指定秒数スリープさせる
|
|
42
|
+
if (sleep_flag == false) {
|
|
43
|
+
console.log("Sleeping");
|
|
44
|
+
start = new Date().getTime();
|
|
45
|
+
sleep_flag = true;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
let progress = new Date().getTime() - start;
|
|
49
|
+
let wait_time = sec * 1000;
|
|
50
|
+
if (progress < wait_time) {
|
|
51
|
+
id_rAF = window.requestAnimationFrame(sleep.bind(null, sec));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
id_rAF = window.requestAnimationFrame(sleep.bind(null, sec));
|
|
55
|
+
cancelAnimationFrame(id_rAF);
|
|
56
|
+
console.log("Sleeping Break!!");
|
|
57
|
+
sleep_flag = false;
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
以上の様に、作り変えた所、**結果は表示されるにはされるのですが、
|
|
63
|
+
別の問題が発生してしまいました**
|
|
64
|
+
|
|
65
|
+
0. 内部で指定秒数まっているつもりなのですが、```wait_time```分待ってくれない
|
|
66
|
+
1. 直前の```requestAnimationFrame```のIDで```cancelAnimationFrame```を行っているはずなのに、
|
|
67
|
+
requestAnimationFrameが終了せず、コンソールにsleepのログが出続ける
|
|
35
68
|
|
|
36
69
|
|
|
70
|
+
という、新たな問題に直面しています。
|
|
71
|
+
|
|
72
|
+
**申し訳ありませんが、再度アドバイスを頂ければ幸いです。**
|
|
73
|
+
|
|
74
|
+
|
3
ブレイクポイントを張るべき位置を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
途中で、ブレイクポイントをはって実行していくと適宜画面表示される。
|
|
26
26
|
|
|
27
27
|
再起呼び出しを行っている関数は```recursive_show_marked()```です。
|
|
28
|
+
```sleep関数```に入ってすぐにブレイクポイントをはって、止めながら進めると、適宜画面更新されます。
|
|
28
29
|
|
|
29
30
|
コードが長くて入らなかったので、CODEPENに記載しました
|
|
30
31
|
[CODEPEN](https://codepen.io/nekora/pen/KKeEVRe)
|
2
再帰呼び出しの関数名を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,6 +24,8 @@
|
|
|
24
24
|
そのまま実行すると、終了時のみ画面表示される。
|
|
25
25
|
途中で、ブレイクポイントをはって実行していくと適宜画面表示される。
|
|
26
26
|
|
|
27
|
+
再起呼び出しを行っている関数は```recursive_show_marked()```です。
|
|
28
|
+
|
|
27
29
|
コードが長くて入らなかったので、CODEPENに記載しました
|
|
28
30
|
[CODEPEN](https://codepen.io/nekora/pen/KKeEVRe)
|
|
29
31
|
|
1
質問の要点を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
何がいけないのか、どこがダメなのか、どうすれば良いのかのアドバイスをいただけたら幸いですm(_ _)m
|
|
16
16
|
|
|
17
17
|
### 実現したいこと
|
|
18
|
-
|
|
18
|
+
「自動進行機能」をONにしてから最初の駒を落とすと途中経過が出ません。
|
|
19
|
+
ブレイクポイントをはると途中経過を確認できます。
|
|
19
20
|
ブレイクポイントをはらなくても適宜画面更新されるようにしたい
|
|
20
21
|
|
|
21
22
|
### 発生している問題
|