teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

現象確認後の回答

2021/03/11 13:19

投稿

int32_t
int32_t

スコア21933

answer CHANGED
@@ -1,3 +1,29 @@
1
+ コメントに書かれたコードだと`mousemove`イベントハンドラが複数登録される問題がありますが、それを直してもだんだん遅くなりますね。
2
+ どうやらコンソールにログが溜まっていくと`console.log()`の実行が遅くなっていくようです。「`console.log()`が何回か呼ばれたら`console.clear()`を呼ぶ」などとして回避できるようです。また、`console.log()`を使わずにメインのページにログ出力するとそんなに遅くなりませんでした。例:
3
+ ```html
4
+ <script>
5
+ ...
6
+ x1 = event.clientX / width;
7
+ y1 = event.clientY / height;
8
+ let ul = document.querySelector('#log');
9
+ let li = document.createElement('li');
10
+ ul.appendChild(li).textContent = `${x0}, ${y0}, ${x1}, ${y1}`;
11
+ li.scrollIntoView();
12
+ x0 = x1;
13
+ y0 = y1;
14
+ break;
15
+ ...
16
+ </script>
17
+ <<ul id="log" style="height:6em;; overflow-y:scroll; position:absolute; width:90%; bottom:0px;"></ul>
18
+ ```
19
+
20
+
21
+
22
+
23
+ 以下、古い回答です。
24
+ ----
25
+
26
+
1
27
  過去の`point`の内容は要らないということなので、イベントハンドラの先頭で空にしてしまえば良いのではないでしょうか。
2
28
  ```js
3
29
  window.addEventListener('mousemove', (event) => {