[WEB]동기/비동기처리 와 콜백함수

동기/비동기처리

 

동기식 처리

자바스크립트는 동기식 처리를 한다. 

한번에 코드 한줄씩 차례로 실행

 

<script>
    console.log(1);
    console.log(2);
    console.log(3);
</script>

 

비동기식 처리 방법

 

실행이 오래 걸리는 함수들을 보통 비동기식으로 처리를 한다

처리하기 위해서는 함수들을 Web API로 이동시켜두고 작업을 완료하면 결과를 출력해준다

Web API 덕분에 작업을 기다리지 않고 빠르게 처리가 가능하다 

 

setTimeout(()=>{},시간) 을 사용해서 1초 후에 timeout1 이 출력되도록 코드를 작성하였다.

<script>
    console.log(1);
setTimeout(() => {
    console.log('timeout'+1);
}, (1000));
    console.log(3);
</script>

다른언어와 다르게 자바스크립트는 기다려주지 않고 해당 줄을 실행하는 동시에 정지 하지않고 실행이 바로 된다.

setTimeout()함수는 자바스크립트가 비동기식으로 처리를 하기 때문에 위와 같은결과가 출력된다.

비동기식 처리의 특징은 오래걸리는 작업이 있을 경우, 해당 작업을 뒤로 미루고 다음 작업을 먼저 처리하는 방식이다.

 

button.addEventListner('clcik' , function(){})

버튼을 생성하고 동작을 하기 위해서 자주 사용하는 addEventListner() 역시 비동기식으로 클릭하지 않고도 다음 코드의 작업을 처리 하게 되어있고 클릭해야 작업이 처리되는 것으로 비동기식이라는 것을 알 수 있다

 

 

콜백함수

 

javascript를 순차적으로 실행하려면 콜백함수를 사용해서 작업을해주어야한다.

콜백함수는 함수안에 함수가 들어가는 형식을 콜백함수라고 한다.

function 첫번째함수(함수){
console.log(1);
함수();
}
function 둘째함수(){
    console.log(2);
}
첫번째함수(둘째함수);

Web API에서 순차적으로 처리하기 위해서는 

다음과 같이 콜백 함수를 사용해서 만들어 주어야지 순차적인 접근이 가능하다.

이러한 콜백함수의 문제는 가독성이 떨어지고 코드가 길어지고 복잡해진다

 

그래서 Promise 패턴을 사용해서 작업을 많이한다.

 

Promise 패턴은 함수().then(function(){

다음으로 실행할 함수 })

.then(function(){ 그 다음으로 실행할 함수} 이런식으로 사용된다.

첫번째함수().then(function(){
    console.log(1);
}).then(function()
{console.log(2);
})