본문 바로가기
✨ 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로 줬기 때문에 비동기 방식으로 코드가 진행이 되며 코드는 하나가 아닌 두개로 나뉘어 서버에서 먼저 처리된 값을 받아오게 된다.

728x90
반응형

댓글