回答編集履歴
3
.
test
CHANGED
|
@@ -15,10 +15,10 @@
|
|
|
15
15
|
**GOOD:**
|
|
16
16
|
```js
|
|
17
17
|
let array = [..];
|
|
18
|
-
|
|
18
|
+
const startTime = performance.now();
|
|
19
19
|
requestAnimationFrame(handleFrame);
|
|
20
20
|
function handleFrame(timeStamp) {
|
|
21
|
-
|
|
21
|
+
const arrayIndex = Math.floor((timeStamp - startTime) / 200) % array.length;
|
|
22
22
|
// array[arrayIndex] を処理
|
|
23
23
|
requestAnimationFrame(handleFrame);
|
|
24
24
|
}
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
```
|
|
33
33
|
**GOOD:**
|
|
34
34
|
```js
|
|
35
|
-
|
|
35
|
+
const startTime = performance.now();
|
|
36
36
|
let fCount = 0;
|
|
37
37
|
requestAnimationFrame(handleFrame);
|
|
38
38
|
function handleFrame(timeStamp) {
|
|
39
|
-
|
|
39
|
+
const expectedCount = Math.floor((timeStamp - startTime) / 200);
|
|
40
40
|
for (; fCount < expectedCount; ++fCount)
|
|
41
41
|
f();
|
|
42
42
|
requestAnimationFrame(handleFrame);
|
2
.
test
CHANGED
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
let expectedCount = Math.floor((timeStamp - startTime) / 200);
|
|
40
40
|
for (; fCount < expectedCount; ++fCount)
|
|
41
41
|
f();
|
|
42
|
+
requestAnimationFrame(handleFrame);
|
|
42
43
|
}
|
|
43
44
|
```
|
|
44
45
|
|
1
コード例追加
test
CHANGED
|
@@ -24,6 +24,25 @@
|
|
|
24
24
|
}
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
+
「200ms毎にある関数を呼ぶ」のような処理は「処理開始からN ms 経過後なら合計 N / 200 回呼ぶ」という処理に変更しましょう。
|
|
28
|
+
|
|
29
|
+
**BAD:**
|
|
30
|
+
```js
|
|
31
|
+
setInterval(f, 200);
|
|
32
|
+
```
|
|
33
|
+
**GOOD:**
|
|
34
|
+
```js
|
|
35
|
+
let startTime = performance.now();
|
|
36
|
+
let fCount = 0;
|
|
37
|
+
requestAnimationFrame(handleFrame);
|
|
38
|
+
function handleFrame(timeStamp) {
|
|
39
|
+
let expectedCount = Math.floor((timeStamp - startTime) / 200);
|
|
40
|
+
for (; fCount < expectedCount; ++fCount)
|
|
41
|
+
f();
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
|
|
27
46
|
----
|
|
28
47
|
|
|
29
48
|
どうしても定期的に処理を行いたいこともあるとは思います。たとえば定期的にサーバにアクセスしないとサーバ側でタイムアウトしてしまうとか。そういう場合は `Worker` を使います。
|