前提
マウスカーソルの位置を取得する処理をReactで作っているのですが、
以下のコードだと毎回処理が発生してしまい、かなり重たくなります。
setTimeoutなどを利用して、処理を減らそうとしたのですがなぜか毎回処理が走ります。
js
1const [clickX, setClickX] = useState(0); 2const [clickY, setClickY] = useState(0); 3 4const frame = document.getElementById('frame'); 5 6// 処理速度 7const fps = 30; 8const frameTime = 1000 / fps; 9 10const setCursorPlace = (e) => { 11 setClickX(e.offsetX); 12 setClickY(e.offsetY); 13}; 14 15// マウス移動時 16frame.addEventListener('mousemove', (e) => { 17 setTimeout(setCursorPlace(e), frameTime); 18}); 19 20return ( 21 <div id="frame> 22 {children} 23 </div> 24);
実現したいこと
setTimeoutの遅延を実現し、処理を軽くしたい。
また、他にいい方法などがありましたら、教えていただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/31 07:46 編集
2022/12/31 08:00
2022/12/31 08:02
2022/12/31 08:10
2022/12/31 08:13
2022/12/31 08:25