함수 moving 호출시 지연시간이 발생하는데 이유를 모르겠어요

함수 포인터에 저장된 주소로 호출만 하면 되는건데, 거기에 지연시간이 길어지니 도저히 원인을 모르겠습니다

(수정 이전 지연시간 이야기는 잘못 확인한거 같아서 지웠습나다 다시 디버깅 했을 때는 같은 현상이 발생하지 않더라고요)

아래는 작성한 코드 입니다




src\Game_system\game.js 의 내용


import { useEffect } from "react";

import Test1 from "./game_managers/test_obj1";

import Event_manager from "./game_managers/event_manager";

function set_screen_size(screen_obj,w,h)

{

screen_obj.style.width = w;

screen_obj.style.height = h;

}

function Game()

{

const Mouse = {pos:{x:0,y:0},btn:{click:0,down:0,up:0},scr:0};

const Keyboard = {enter:"",down:"",up:""};

const Functions = {move:new Array(),click:new Array(),down:new Array(),up:new Array(),scr:new Array()};

const event_info = {mouse:Mouse,keyboard:Keyboard,functions:Functions};

useEffect(()=>{

let screen_obj = document.getElementById("screen");

set_screen_size(screen_obj,"100vmax","100vmax");

},[])



return(

<div id="screen">

<Event_manager events={event_info}/>

<Test1 events={event_info}/>

</div>

);

}


export default Game;





src\Game_system\game_managers\event_manager.js 의 내용


import {useEffect} from "react"


function Event_manager({events})

{

useEffect(()=>{

let move= (event)=>{

events.mouse.pos.x = event.pageX;

events.mouse.pos.y = event.pageY;

for(let i=0;i<functions.move.length;i++)

{

functions.move[i]();////////////////////////////////여기서 지연이 발생합니다

}

};

window.addEventListener("mousemove",move);

return (() =>

{

window.removeEventListener("mousemove",move);

});

},[])

return;


}

export default Event_manager;






src\Game_system\game_managers\test_obj1.js의 내용


import {useEffect,useState} from "react"

function Test1({events})

{

let [bow_img,set_bow_img]=useState("5.png");

useEffect(()=>{

let bow_obj = document.getElementById("bow");

bow_obj.style.position = "absolute";


function moving()

{

bow_obj.style.left=events.mouse.pos.x+"px";

bow_obj.style.top=(events.mouse.pos.y-(bow_obj.clientHeight/2))+"px";

}

events.functions.move.push(moving);


},[])


return(


<img id="bow" src={bow_img}/>

);


}

export default Test1;






app js에는 그냥

function App() {

return (

<div className="App">

<Game/>

</div>

);

이렇게 되어 있습니다