jquery ajax 순차적 동기 처리 async false 메서드의 실행이 완료될 때까지 기다린다.

jquery 의 ajax 는 비동기를 기본값으로 http 요청을 처리한다. 만약 순차적으로 동기 처리를 하고 싶다면 $.ajax 에서 제공하는 async 옵션을 false 로 설정하면 된다. 순차적 동기 처리 방식이란 실행될 모든 메서드들은 이미 실행중인 메서드의 작업이 완료될 때까지 기다린 후 실행되는 것을 말한다.

jquery ajax 순차적 동기 처리
async false
메서드의 실행이 완료될 때까지 기다린다.

jquey를 사용할 때 자주 사용되는 것이 $.ajax 메서드이다.

$.ajax 메서드는 비동기로 http 요청을 한다.

http 요청이란 데이터를 불러오거나 저장하는 등의 작업을 말한다.

jquery를 사용하여 비동기방식으로 http 요청을 하는 이점이야 여러가지가 있지만, 그럼에도 동기방식으로 순차적인 처리가 필요한 경우가 있다.

데이터를 저장하는 경우라거나 순서대로 데이터를 보여줘야 할 때가 그것이다.

자바스크립트 동기 비동기 동작 방식 이해

자바스크립트로 웹페이지의 동작이나 데이터를 표시할 때 동기와 비동기적인 처리를 한다. jquery를 사용할 경우 비동기는 기본값으로 동작한다. 동기와 비동기는 여러 개의 자바스크립트가 직

lngnat.tistory.com

순차적 동기 처리

일반적인 프로그래밍은 나열된 함수나 메서드를 순서대로 처리한다.

하나의 메서드의 처리가 끝나야 다음에 위치한 메서드가 실행을 하게 된다.

이런 점에서 동기 방식의 순차적 처리는 비효율적이기도 하지만 데이터의 가공과 처리가 순차적으로 일어나는 경우라면 동기방식을 사용하는 것이 좋다.

jquery 의 $.ajax 메서드를 사용하게 될 때는 기본적으로 비동기방식이 기본값이기 때문에 async 옵션으로 순차적 동기 처리를 하도록 할 수 있다.

async : false

jquery 의 $.ajax 메서드를 사용할 때 async 옵션을 false 로 설정하면 ajax 비동기 요청을 순차적 동기 방식으로 사용할 수 있다.

아래는 $.ajax 메서드를 순차적 동기 방식으로 사용하기 위해 async 옵션을 false 를 설정한 것이다.

var fnSync = function() {
    $.ajax({
        async: false,
        success: function(){
            console.log("$.ajax Sync");
        }
    });
};

전체코드 및 결과

아래는 $.ajax 를 순차적으로 동기 처리를 하는 코드이다.

url 을 적어놓지 않아도 코드는 동작한다.

처리속도가 터무니 빠르기 때문에 가시적인 차이는 확인할 수 없지만, 내부적인 처리를 확인해 보면 모두 순차적으로 동작하고 있는 것이 확인된다.

즉, 비동기와는 다르게 각 메서드들은 이전에 실행 중인 메서드의 처리가 끝나기를 기다린 후 다음 순서에 있는 메서드를 실행한다.

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>jquery ajax sync</title>
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<header>
			<h1>jQuery $ajax sync</h1>
		</header>
		<article>
		</article>
		<footer>
		</footer>
	</body>
	<script>
		
        var gList = ["1", "2", "3", "4", "5"];
        
		$(document).ready( function() { /* without resources */ });
		$(window).on('load', function() { 
			/* with resources */ 
			fnSync(gList[0]);
			fnSync(gList[1]);
			fnSync(gList[2]);
			fnSync(gList[3]);
			fnSync(gList[4]);
		});
	</script>
	<script>
		var fnSync = function(idx) {
			$.ajax({
				async: false,
				success: function(){
					console.log("$.ajax Sync", idx);
				}
			});
		};
	</script>
</html>

저작자표시 비영리 변경금지

'programming > javascript' 카테고리의 다른 글

자바스크립트 fetch 함수 사용법 api 파일 이미지 등 데이터 요청하기 (0)	2022.12.17
자바스크립트 에러 발생 시키기 강제로 에러 만들고 테스트하기 (0)	2022.12.16
웹사이트 로딩바 만들기 로딩화면으로 기다림 방지 (0)	2022.11.03
자바스크립트 Map 요소 값 삭제하기 Removing value at Map (0)	2022.06.26
자바스크립트 Map 값 추가하기 adding value at Map (0)	2022.06.20

jquery ajax 순차적 동기 처리 async false 메서드의 실행이 완료될 때까지 기다린다.