비동기 처리 복습 21.03.24

[비동기 처리 공부 전 알아야 할 개념]

콜백 함수 : 다른 함수의 argument(전달 인자)로 넘겨주는 함수

콜백함수 연결 방법 : 함수 실행을 연결하는 것이 아닌 함수 자체를 연결해야한다.

// 콜백 할 함수
function A() {
	console.log('버튼을 클릭했습니다.')
}
// 옳바른 연결 1
document.querySelector('#button').onclick = A;
// 버튼을 클릭했을 때 A 함수가 실행

// 옳바른 연결 2
document.querySelector('#button').onclick = function A() {
	A();
}

// 옳바른 연결 3
document.querySelector('#button').onclick = A.bind();

// 잘못된 연결
document.querySelector('#button').onclick = A();
// 함수 A는 return 값이 없기 때문에 함수 A()의 값은 undefined
// 버튼을 클릭했을 때 undefined를 연결했으므로 잘못된 연결이다.

[blocking vs non-blocking]

blocking : 마치 전화 통화 같다. 하던 일을 멈추고 받아야한다.(하고 있던 작업에 blocking이 일어난다.) 요청에 대한 결과가 동시에 일어난다. (동기)
non-blocking : 마치 문자 메시지 같다. 확인 후 나중에 답장할 수 있다. (하고 있던 작업을 blocking할 필요 없다.) 요청에 대한 결과가 동시에 일어나지 않는다.(비동기)

예시 : 커피 주문의 동기 vs 비동기

동기

function waitSync(ms) {
    let start = Date.now();
    let now = start;
    while( now - start < ms ) {
        now = Date.now();
    }
}
// 위 코드는 ms 범위 내에서 무한 루프를 도는 blocking 함수.

function drink(person, coffee) {
    console.log(person + '는 ' + coffee + '를 마십니다.');
}

function orderSync(coffee) {
    console.log(coffee + '가 접수되었습니다.')
    waitSync(2000);
    return coffee;
}

let customers = [{
    name: 'creamer',
    request: '녹차'
    }, {
    name: 'dreamer',
    request: '아메리카노'    
    }];

// 동기 호출
customers.forEach(function(customer) {
    let coffee = orderSync(customer.request);
    drink(customer.name, coffee);
})
// 녹차가 접수되었습니다.
// (2000ms 후)
// creamer는 녹차를 마십니다.
// 아메리카노가 접수되었습니다.
// (2000ms 후)
// dreamer는 아메리카노를 마십니다.

비동기

function waitAsync(callback, ms) {
    setTimeout(callback, ms); // setTimeout : 특정 시간 이후에 callback 함수가 실행 
}

function drink(person, coffee) {
    console.log(person + '는 ' + coffee + '를 마십니다.');
}

function orderAsync(coffee, callback) {
    console.log(coffee + '가 접수되었습니다.')
    waitAsync(function() {
        callback(coffee);
    }, 4000);
    return coffee;
}

let customers = [{
    name: 'creamer',
    request: '녹차'
    }, {
    name: 'dreamer',
    request: '아메리카노'    
    }];

// 비동기 호출
customers.forEach(function(customer) {
    orderAsync(customer.request, function(coffee) {
    drink(customer.name, coffee);
    });
})
// 녹차가 접수되었습니다.
// 아메리카노가 접수되었습니다.

// creamer는 녹차를 마십니다.
// dreamer는 아메리카노를 마십니다.

function B() {
	console.log('콜백함수 입니다.'
}

function A(callback) {
	callback();
}

A(B);

[비동기 함수 전달 패턴]

callback 패턴

let request = 'americano';

orderCoffeeAsync(request, function(response) {
	// response -> 커피 주문 결과
	drink(response);
});

2.이벤트 등록 패턴

let request = 'americano';
orderCoffeeAsync(request).onready = function(response) {
	drink(response);
}

[비동기의 주요 사례] 1.DOM 이벤트 핸들러 : 마우스, 키보드 입력 (click, keydown 등) / 페이지 로딩 (DOMContentLoaded 등) 2.타이머 : 타이머 API (setTimeout 등), 애니메이션 API (requestAnimationFrame) 3.서버에 리소스 요청 및 응답 : fetchAPI / AJAX (XHR)

-브라우저의 비동기 함수 작동원리 알아보기 : Event Loop MDN

[타이머 관련 API] setTimeout(callback, millisecond) : 일정 시간 후에 함수를 실행

arguments: 실행할 callback 함수, callback 함수 실행 전 기다려야 할 시간 (밀리초)
return value: 임의의 타이머 ID

setTimeout(function() {
  console.log('1초 후 실행');
}, 1000);
// 123

setInterval(callback, millisecond)

arguments: 실행할 callback 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
return value: 임의의 타이머 ID

+setTimeout에 대응하는 clearTimeout도 있음

setInterval(function() {
  console.log('1초마다 실행');
}, 1000);
// 345

clearInterval(timerId) 반복 실행중인 타이머를 종료

arguments: 타이머 ID
return value: 없음

var timer = setInterval(function() {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// 더 이상 반복 실행되지 않음

Share this post