본문 바로가기
✨ Front-end/자바스크립트(JS)

[Javascript - Ajax] 동기(Synchronous)와 비동기(Asynchronous)

by 환풍 2023. 3. 27.
728x90
동기(Synchronous)와 비동기(Asynchronous)

비동기 방식 - 하나의 작업 종료까지 기다리지 않고 다음 작업을 진행하는 비순차적 처리 방식

동기 방식 - 하나의 작업이 끝난 뒤 다음 작업을 진행하는 순차적 처리 방식

 

비동기 처리의 장점

  •  비동기 처리를 요청하고 그 처리 시간 동안 다른 작업을 할 수 있기 때문에 동기 처리 프로그램보다 자원을 좀 더 효율적으로 사용가능하다.

 

비동기 처리의 단점

  •  -동기 처리 방식 프로그램보다는 개발이 복잡해진다.

 

ajax에서 async를 false로 주었을 때,

이때 alert가 뜨는 순서는 1 2 3 4 '사용 가능한 id입니다.'  5 6 aa(10) 으로 해석할 수 있다.

즉, ajax는 실행될 때 시작부터 일반적인 코드와 나뉘게 되면서 따로 실행이 되는데, 그런 기능을 false 시켜주게 되면 본 코드가 실행되는 성질 그대로 위에서 부터 아래로 순차적으로 실행되는 것이다.

 

ajax에서 async를 true(기본값)로 주었을 때,

나의 alert 순서는 1 2 3 6 5 4 '사용 가능한 id입니다.' 5 

이렇게 떴지만, 정확히 본다면 1 2 3 까지 실행 후 ajax와 alert(6)이 따로 실행이 된다.

즉, ajax가 실행되면서 async는 true로 줬기 때문에 비동기 방식으로 코드가 진행이 되며 코드는 하나가 아닌 두개로 나뉘어 서버에서 먼저 처리된 값을 받아오게 된다.

반응형

댓글