Introduction

callback을 js를 사용하며 자주쓰는데, 왜 사용하는지 확실히 알 필요가 있다.

[Javascript] 비동기, Promise, async, await 확실하게 이해하기

해당 글을 반드시 읽어봐야 한다..

글을 쓰게된 계기..

js가 인터프리터 언어라고해서 C마냥 글 읽듯이 순서대로 실행되고, 실행이 다 될때까지 기다려주고를 생각했는데 생각보다 개판으로 돌아갔다.

진짜 보고 무슨 스레드 돌아가는 줄 알았다.

A 함수가 끝나기도 전에 B, C함수 들이 이미 실행되었거나 마친 후였고 아니면 갑자기 중간에 실행이 되었다.

어떤 방식으로 OS가 각 프로세스에 실행권한을 처리하는지는 모르겠다만 확실한 건 setInterval은 사용할 때 매우 주의 해야한다.

본론

예시

예를 들어 아래와 같이 "1초마다 반복하고, 변수를 100까지 채우면 끝내야지" 라고 함수가 있다고 치자.

var num = 0;
var refInterval = setInterval(() => {
                    num += 10;
                    if(num >= 100) 
                    {clearTimeout(refInterval2);}
                    }, 1000);

console.log(num);
func1();
func2();

결과가 어떻게 될 것 같은가?
100초 뒤에 콘솔에 100이 찍힐까?

결과는 0이 출력된다.

또한 func1() 및 func2() 또한 100초는 무슨, 0.01초만에 즉시 실행되고 끝나버린다.

why?

말하자면 그 이후의 함수 및 코드들은 언제 끝날지 모르는 "1초 마다의 반복"이 끝나는 것을 기다려 주지 않는다.

var num1 = new MakeUl(gameBox).init();
var num2 = new MakeUl(gameBox).init();
var num3 = new MakeUl(gameBox).init();
sumFunc(num1, num2, num3);

이렇게 4개의 함수가 있으면 어떻게 실행될까?
init에서는 정수값이 반환된다고 가정한다.

각 객체가 생성되고 init이 차례대로 실행될까?

물론 init이 정상적인 함수라면 순서대로 실행될 것이다.

결과는 개판 난다.

해당 init 함수 내부에는 setInterval함수를 사용하고 있었기 때문이다.

즉, clearTimeout(refInterval) 으로 init 내부의 프로세스가 끝나지 않더라도 다른 2, 3번째의 init함수 또한 실행되게 된다.

그러다 보니 거의 동시에 스레드가 돌아가는 거 마냥 setInterval 함수가 중구난방으로 동작하게 되고 해당 함수들이 전부 끝나고 나서 실행해야지 하고, 설계해 둔 tempFunc()는 시작과 동시에 tempFunc()이 실행되어 버린다.

해결방안

콜백 함수를 사용하면 된다.

즉, 마지막 init함수의 매개변수로 sumFunc함수를 전달해 주면 된다.

init함수 내부에서 완전히 끝나게 되는 clearTimeout(refInterval)이 실행되는 부분에, 전달한 callback 함수를 실행해 주면 된다.

물론 이것또한 단지 하나의 해결 방법일 뿐이다.
또한 앞선 2번의 init의 setInterval이 먼저 끝나고, num1, num2은 setInterval이 종료될 때 값이 할당 된다는 가정이다.

var num1;
var num2;
new MakeUl(gameBox).init();
new MakeUl(gameBox).init();
new MakeUl(gameBox).init(sumFunc(num1, num2));

이 때 1, 2번째의 init함수에는 콜백함수가 전달되지 않기 때문에 다음과 같은 구문이 추가 되야한다.

// 콜백함수가 null이 아닌 경우만 콜백함수를 실행하라.
if (callback != null)
{
	callback()
}    

과제 내용(jackpot)

숫자 1~9 사용

같은 숫자가 3개가 나올 확률은 1.23%이므로 불가능에 가깝다.

숫자 1~3 사용

따라서 나오는 숫자의 개수를 1,2,3 3개만 나오도록 한 버전도 첨부한다.