実行したい処理が間に合わず遅延してしまう場合の回避方法について

Question

マウスを移動する毎にそのマウスポジションを取得し、その値を関数にて計算し配列へとpushすると毎回30程度のデータができます。
その配列の値を頭から順に処理しようとfor文を使い（今回はlogのみの出力です）処理を施しますが、最初の内は問題なくconsole.logへ数値が出力されます。
しかし、マウスのポジションは常に動いているためか動作が間に合わずlogの出力が遅延してしまいます。
動作自体はしており、しばらく待つとlogが出力されますが遅延が酷くとても使用に耐えられません。このような場合、遅延など無く上手く処理するするにはどの様にするのが良いでしょうか。宜しくお願い致します。

let point = [];

let width  = window.innerWidth; 
let height = window.innerHeight; 
let x0 = null;
let y0 = null;

 window.addEventListener('mousemove', (event) => {
      point[];
      x0 = Math.floor(((event.clientX / width) * 100));
      y0 = Math.floor(((event.clientY / height) * 100));
      //計算の呼び出し
      test(x0, y0)
      for(key in point){
        console.log(point[key].x);           
        console.log(point[key].y);
   }
 }, false);

function test(x0, y0) {
        const px = Math.abs(x1 - x0);
                .
                .
         //別途計算式があります
                .
                .

           point.push({x:x0, y:y0});}

        return point;
  }

Comments

[maisumakun]

ご提示のコードで、イベントコールバックの後に書いている「point[];」だけの行は、何をしているつもりなのでしょうか？

[X001017]

すいません、消し忘れで配列を初期化していたものが入っているだけです。

Answer 1

コメントに書かれたコードだとmousemoveイベントハンドラが複数登録される問題がありますが、それを直してもだんだん遅くなりますね。
どうやらコンソールにログが溜まっていくとconsole.log()の実行が遅くなっていくようです。「console.log()が何回か呼ばれたらconsole.clear()を呼ぶ」などとして回避できるようです。また、console.log()を使わずにメインのページにログ出力するとそんなに遅くなりませんでした。例:

<script>
...
      x1 = event.clientX / width;
      y1 = event.clientY / height;
      let ul = document.querySelector('#log');
      let li = document.createElement('li');
      ul.appendChild(li).textContent = `${x0}, ${y0}, ${x1}, ${y1}`;
      li.scrollIntoView();
      x0 = x1;
      y0 = y1;
      break;
...
</script>
<<ul id="log" style="height:6em;; overflow-y:scroll; position:absolute; width:90%; bottom:0px;"></ul>

以下、古い回答です。

過去のpointの内容は要らないということなので、イベントハンドラの先頭で空にしてしまえば良いのではないでしょうか。

window.addEventListener('mousemove', (event) => {
    point = [];
    ...

(そもそもグローバル変数である必要もないのかもしれません)

配列を順に走査するにのふつうは for in は使わないと思います。通常の for か for of でしょう。速度には関係しないと思いますが。

for (let i = 0; i < point.length; ++i) {
   console.log(point[i].x);
   console.log(point[i].y);
}

for (let p of point) {
   console.log(p.x);
   console.log(p.y);
}

Comments

[X001017]

すいませんありがとうございます。イベントの開始にforで処理するconsole.logが間に合っていないのか、イベントの開始と初期化のタイミングがやはりマズイのでしょうか。実際のものはどうもイベントハンドラ直後に初期化なされているようではありました。for inに関してはありがとうございます。

[int32_t]

であれば、問題が再現できるソースを開示していただかないと助言は無理です。

[X001017]

初期化のタイミングがイベントハンドラ直後であること以外はほぼそのままのソースではあります。mousemoveなのでイベントが発生するまでの期間が短すぎるというようなことはあったりしますでしょうか。このような場合は非同期処理などをして変わるものでしょうか。

[int32_t]

経験的には、毎mousemoveでたかが30個程度の配列を生成するぐらいで遅くなったりしない感触です。なので、再現するコードがないと何とも言えません。

[X001017]

ありがとうございます。
現状、Chromeのデベロッパーツール上でテストとして試している程度なのですが、そのような環境上でこのようなことが起きることはあり得ますでしょうか。Chromeで起きうることなのか知りたいところではありました。
また、下記の通りの配列などを使わず、ただ単にconsole.logの結果のみを出し続けるものでも同様に問題が起きるのですが、これは正しい反応でしょうか。よろしくお願いいたします。

let width = window.innerWidth;
let height = window.innerHeight;

let count = 1;

let x0 = null;
let y0 = null;
let x1 = null;
let y1 = null;

window.addEventListener('mousedown', (event) => {

window.addEventListener('mousemove', (event) => {

switch(count) {
case 1:
x0 = event.clientX / width;
y0 = event.clientY / height;
count = 2;
console.log('case 1:');
break;
default:
console.log('case 2:');
x1 = event.clientX / width;
y1 = event.clientY / height;

console.log(x0, y0, x1, y1);
x0 = x1;
y0 = y1;
break;
}

}, false);

}, false);

window.addEventListener('mouseup', (event) =>{
count = 1;
}, false);

[int32_t]

現象を確認しました。回答を更新します。

[X001017]

ありがとうございます。cnsole.logも溜まると実行上問題が出るのですね。実際の使用ではconsole.logの部分を本来使用するコードへ置き換えるつもりで、テスト上このような形でも問題が起きていたため非常に悩んでおりました。一度実際のものへ置き換えてみたいとは思います。配列上において30固定度の配列の生成、使用において経験上問題がないとのことで、テストできましたらと思います。いろいろ有難うございます。

Answer 2

すいません、消し忘れで配列を初期化していたものが入っているだけです。

途中での配列の初期化をどこでも行っていない以上、マウスの動きでデータが積もっていけば過去の分まですべてを毎回出力し続けることとなりますが、それは意図した動作でしょうか？

Comments

[X001017]

過去の分については処理したくないので、ここでの配列の初期化はこれでよいのかもしれません。

[maisumakun]

> ここでの配列の初期化はこれでよいのかもしれません。

位置としてもコード内容の面でも正しくありません（そのままのコードではそもそも実行できません）。

[X001017]

全てのコードは記載していないのですが、実行はできているので、for文ではなく他のものを使用した方が良い等はありますでしょうか。

[maisumakun]

> 全てのコードは記載していないのですが

問題を再現するのに必要十分なソースを示してください。初期化をやっているのかやっていないのかすら、これまでのやり取りから読み取ることができません。

[maisumakun]

point[];は何も行いません。初期化したいならpoint=[];ではないでしょうか。

Answer 3

処理自体が重いなら遅延なく対応することはできないでしょう
あえて言えば高速なマシンを使うことです
現実的なのは取得するデータを間引くことです

Comments

[yambejp]

一旦最小限動作するものを提示ください
その上で調整できるかテストしてみます

Answer 4

過去の分については処理したくないので、

ということなので、現在の計算結果だけ出力すれば良いと考えます。

const width = 10, height = 10; // 不明な変数 width, height があるので、とりあえず初期化しておく

window.addEventListener('mousemove', event => {
  const x = Math.floor(((event.clientX / width) * 100));
  const y = Math.floor(((event.clientY / height) * 100));
  const point = test(x, y);

  console.log('x', point.x);
  console.log('y', point.y);
}, false);

function test(x, y) {
  //別途計算式があります
  return {x: x, y: y};
}

Re: X001017 さん

Comments

[X001017]

ありがとうございます。現在の計算結果は配列になるためどうしても頭から取り出して処理したい次第です。

[think49]

「現在の計算結果は配列」とはどういう意味でしょうか。
配列pointに格納された全要素が「現在の計算結果」なのですか。
だとすると、マウスカーソルを動かす度に要素数が増えていきますので、出力数も増えていき、遅延時間が増えていくのは仕方がない事であるといえます。

計算に必要なデータの内訳、計算結果の内訳を詳しく書いて下さい。