자바스크립트에서 api응답값을 다 받은후에야 api이전에 실행되었어야할 html렌더링이 api응답 이후에나 반영되는 이유 아시는분..

Question

function onClickButton() { $('#Box1').load('./test.html'); $('#loadingImg').show(); const response &#61; AppFunction.goApp('url', data); }어떤 버튼을 클릭하면 onClickButton 함수가 실행하는 로직입니다. AppFunction 함수는 안드로이드에서 자바스크립트 브릿지로 만들어 보내준 함수이고, 웹에서 저 AppFunction함수를 가져다가 서버와 통신해야 하는 상황입니다. Appfunction.goApp 함수가 안드로이드에서 동기로 만들어졌든, 비동기로 만들어졌든간에 const response &#61; AppFunction.goApp('url', data); 이 코드가 실행되기전 위에 파일을 로드하고 로딩이미지를 show하는 부분이 이루어져야 하는데.. api함수(응답이 오는데 한 4초 걸립니다) 의 응답값이 다 오고나서야 로딩이미지가 보여지고, load했던 html이 보여집니다.. 정말 이해가 안되는데 이런 현상이 발생할 만한 가능성있는 이유를 아시는 분 계신지요

leon808 · Answer

한지 오래되서 가물가물한데 jquery 에서 load 는 동기식 함수가 아니지 않나요?순서가 꼬인거 같다고 느껴지면 디버깅 툴을 쓰시든, 공식 문서를 보시든 하셔서 정말 순차적으로 진행되는지 여부를 따져보는게 좋습니다

풍월상신(가니메디안) · Answer

onClickButton() 의 내부 코드가 한 덩어리로 취급되기 때문이겠죠.$('#loadingImg').show(); onClickButton()이렇게 로딩 이미지를 onClickButton() 과 동등한 레벨에서 먼저 콜 해주는 게 맞을 것 같고요.fetch 가 필요한 프로세스인 것 같은데, async 프라미스 처리가 필요해 보입니다.async function someFunc() { let response try { $('#loadingImg').show(); $('#Box1').load('./test.html'); response = await AppFunction.goApp('url', data); // hope that goApp is an async func. } catch(e) { // error handling.. } finally { $('#loadingImg').hide(); } } someFunc();

자바스크립트에서 api응답값을 다 받은후에야 api이전에 실행되었어야할 html렌더링이 api응답 이후에나 반영되는 이유 아시는분..

2개의 답변

#http 목록