JavaScript マウス座標を記録して再生しオブジェクトを移動

Question

前提・実現したいこと

JavaScript初心者です やろうとしてることがうまくいきません

div内でマウスを動かし、その座標を記録、再生しオブジェクトを移動するといったものです

下記ソースコードを実行すると一見動いてるように見えるのですが、

一瞬style.topとstyle.leftが0のような状態になり、オブジェクトに座標にちらつきが発生します

このちらつきはなぜ発生するのでしょうか？

原因がわかる方いましたら回答お願いいたします

該当のソースコード

<div id="field" style="position:relative;width:550px;height:550px;background:yellow">

<font id="xy" style="width:50px;height:50px;position:absolute"></font></div>

<script>
function p() {
//座標を配列に入れる
x.push(event.offsetX);
y.push(event.offsetY);
}


var x=[];
var y=[];
var j=0;
function rec(){
if(j<1){//1秒間のみの座標を記録
setTimeout("rec()",1000);
j++;
}else{
//1秒たったらply()で再生
j=0;
ply();
rec();
}
}

var i=0;
function ply(){
//読み込んだ座標へObjectを移動させる
if(x.length>i){
xy.style.left=x[i]+'px';
xy.style.top=y[i]+'px';
setTimeout("ply()",1);
xy.innerText="X:"+x[i]+" Y:"+y[i];
i++;
}
}


window.onload=function(){
xy.style.transition = "all 0.001s";
field.addEventListener('mousemove', p);
rec();
}
</script>

Answer 1

チラつきの原因は、座標を表示しているxyオブジェクトの上にマウスが重なると、小さい座標を拾ってしまうので、左上に移動してしまうようです。

pointer-events:noneを入れることでマウスイベントを拾わなくなります。

<font id="xy" style="width:50px;height:50px;position:absolute;pointer-events:none"></font>

また、1ミリ秒での更新をされていますが、ブラウザのFPSは高くないため、17ミリ秒（FPSが約60）くらいで十分かと思います。
ご参考になりましたら幸いです。

Comments

[pppo]

回答ありがとうございます
無事変な動きがなくなりました！

＞1ミリ秒での更新をされていますが、ブラウザのFPSは高くないため、17ミリ秒
こういうことでしょうか？
setTimeout("ply()",17);

あと、こういう変な動きをした場合どうやって原因を特定したんでしょうか？
コンソールにもエラーログとして出ていないので特定が困難でした

[gas.engine]

特定したこと自体は経験と推測です。
突然、座標が(0,0)近いところに移動したので、しばらく試したのち要素が重なっていて別の要素を拾ったのではと考えました。

[gas.engine]

＞setTimeout("ply()",17);

＞xy.style.transition = "all 0.017s";

これでも十分スムーズに移動するのと無駄に負荷がかからないと思います。