[jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기

콜백 함수와 체이닝

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  position: relative;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <div id="d1">
        <img src="../images/chi1.jpg" alt="chi">
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#d1').on('click', function(){
        $('img').hide('slow');
        alert("숨겼음");
    });
</script>
</body>
</html>

=> alert를 나중에 작동할 수 있게 변경함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
img {
  width: 200px;
  position: relative;
}
#d1 {
  border: 2px solid yellow;
  height: 200px;
}
</style>
</head>
<body>
    <div id="d1">
        <img src="../images/chi1.jpg" alt="chi">
    </div>

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
    $('#d1').on('click', function(){
        $('img').hide('slow', function(){
            alert("숨겼음");
        });
    });
</script>
</body>
</html>

동기 & 비동기

1. 동기와 비동기란

동기(Synchronous)

: 요청에 대한 응답 완료시 다음 업무를 요청하는 방식

- 장점 : 직관적이며 설계가 쉽고 실행순서가 보장된다.
- 단점 : 실행중인 코드의 처리시간이 늘어나도 결과가 나올 때까지 대기해야 하는 작업중단(blocking)현상 발생

비동기(Asynchronous)

: 요청에 대한 응답 확인 전 다음 업무도 요청하는 방식

- 장점 : 데이터 처리 중 다른 작업이 가능하기 때문에 자원을 효율적으로 사용하며 불필요한 로딩을 줄일 수 있다
- 단점 : 설계가 어렵고 실행순서가 보장되지 않으므로 어떤 작업이 먼저 끝날지 알 수 없음

2. 자바 스크립트의 동기적 흐름

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    alert("1");
    (function(p_arg){alert(p_arg);})("2"); // 즉시 실행 함수
    function fnc(){alert("3")}
    fnc();
    console.log("4");

</script>

3. 자바 스크립트의 비동기적 흐름

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    alert("a"); // 우선 순위 높음
    function fnc1() {
        alert("b");
    }
    setTimeout(fnc1, 3000); // 대표적인 비동기함수인 타이머함수
    alert("c");
    $.get('text.txt', function(res){alert(res)}); // jQuery get방식 단축모드 AJAX(비동기통신)

</script>

test.txt

d Dit

=> 시간을 가늠하기 위해 아래의 코드를 추가해 실행

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    alert("a");
    function fnc1() {
        console.timeEnd('yujin'); // 실행시간을 가늠하기 위한 엔드
        alert("b");
    }
    setTimeout(fnc1, 3000);
    console.time('yujin'); // 실행 시간을 가늠하기 위한 스타트
    alert("c");
    $.get('test.txt', function(res){alert(res)});

</script>

4. 비동기적 로직 제어를 위한 callback

콜백 함수 : 비동기로 작성된 함수를 동기 처리하기 위한 하나의 방법론
>> 비동기를 기본으로 하면서 일부 구간에서만 순차적인 처리가 필요할 때 많이 사용됨

ex) ① AJAX로 서버의 정보를 응답받기
② 응답받은 정보를 DB에 저장
③ 저장 직후 메인페이지로 이동

로직 구현 시 >> 응답 시점을 모르는 비동기 처리를 제어하기 위한 방법으로 callback을 사용

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    let a = $.get('test.txt'); // 비동기통신을 통해 요청에 대한 응답(dDit)을 받아 변수에 담음
    console.log(a.responseText + '를 db에 저장'); // undefined를 db에 저장
    setTimeout(function(){
        console.log(a.responseText + '를 DB에 저장');
    },1000);

</script>

5. 콜백 지옥과 대체제 Promise(ES6)

비동기는 끝나는 시점이 정해지지 않고 처리결과를 콜백으로 받아 처리하는 구조
>> 콜백함수의 중복된 사용이 발생하며 그것을 Hello of callback이라고 부른다. 개선을 요청하여 Promise가 탄생되었다.

[Promise, 미래에 발생할 일이나 결과(약속)]
- 비동기 작업을 처리하고 결과를 반환하는 객체 (resolve, 해결 / reject, 거부)
- 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타내는 객체

- 3개의 상태
pending 대기 : 객체 생성 초기단계 / 비동기 작업 중 / 결과 값은 아직 없는 상태
fulfilled 이행 : 비동기 작업 성공적으로 완료 / 결과 값이 있으며 사용 가능 상태
rejected 거부 : 비동기 작업 실패 / 에러 정보 등 추가정보를 제공

Promise객체를 반환받을 때 두개의 (해결 또는 이행/거부에 관한) 콜백함수를 같이 받음
- 이행 상태일 때는 then()으로 처리결과를 받음
- 거부 상태일 때는 catch()로 에러정보를 받음

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

    function promiseFnc(p_arg) {
        return new Promise(function(res, rej) {
            if(p_arg) {
                res("이행상태에 따라 처기력과를 반환하는 함수를 통해 응답을 제공 >> " + p_arg);
            } else {
                rej("거부상태에 따라 에러정보를 반환 >> ");
            }
        });
    }

    promiseFnc("함수 호출").then(res => console.log(res)).catch(err => console.log(err));
    promiseFnc().then(res => console.log(res)).catch(err => console.log(err));

</script>

'jQuery' 카테고리의 다른 글

[jQuery] 20장 Ajax (0)	2024.02.27
[jQuery] 19장 JSON (1)	2024.02.27
[jQuery] 17장 효과, 애니메이션 (0)	2024.02.27
[jQuery] 16장 필터링 (0)	2024.02.26
[jQuery] 15장 DOM 탐색 (0)	2024.02.26

'jQuery' 카테고리의 다른 글

티스토리툴바