JAVASCRIPT에서 onload 이벤트

Question

1)

2)

1 번 사진이 onload안쪽 함수이고 2번 사진이 onload 밖 함수인데,

당연스럽게도 onload하는데 시간이 걸리기때문에 그 시간에 2번사진의 코드가 실행됩니다.

이걸 어떻게 고쳐야 1->2 순서로 실행되게 할수있을까요?

• 
• 

Answer 1

안녕하세요.

우선 onload 뒤에 함수를 a(), 그리고 2번을 별도의 함수 b()로 정의하시고,

function a(temp){ } function b(){ 2번째 실행 내용 } window.onload = function(temp){ a(temp) b() }

Answer 2

가장 간단한 방법으로는 1번 onload 안에다가 2번 코드를 붙여 넣으면 됩니다.

코드를 단계적으로 리펙토링하는 것도 하나의 방법입니다.

1. 1번 onload에다가 2번 코드를 넣습니다.

2. 2번 코드를 함수로 만들고 1번 onload에서 함수를 호출 합니다.

3. async와 await 사용해서 코드를 변경합니다.

이처럼 단계적으로 코드를 좀더 좋은 방법으로 변경해가는 것이 좋을 것 같습니다.

Answer 3

안녕하세요~! 아하(Aha) 지식답변자 다라닝입니다.

질문하신 내용에 대하여 아래와 같이 답변 드립니다.

내부 소스를 서로 바꾸거나 먼저 호출되는곳에서 하위로 호출하면 됩니다.

정 기존 함수를 살리고 싶다면 스크립트 함수 호출 우선순위를 공부해보셔야합니다.

온로드도 실행순서에 따라 호출되는거라 컨트롤이 가능하며 document.ready를 활용해볼수도 있습니다

부족하지만 도움이 되셨기를 바라며 추가적인 문의가 필요하시면 답변 부탁드려요!

Answer 4

자바스크립트는 비동기 방식으로 처리하기 때문에 onload 함수의 코드가 모두 실행되지 않아도 2번 부분의 코드가 실행되는 것입니다.

이런 경우에는 동기 처리를 해주어야하는데 Callback, Promise, Async 등을 통해 해당 문제를 해결할 수 있습니다.

마침 해당 문제에 대해 잘 설명해 둔 블로그가 있어 주소 남겨드립니다.

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/