콜백함수(setInterval)와 비동기적 프로그래밍

setInterval

setInterval(function(){},ms);

설정된 시간마다 반복

$(document).ready(function(){
        setInterval(function(){
            console.log("interVal");
        },500);
    });

0.5초마다 출력.

변수에 넣는다면?

      $(document).ready(function(){
        let a = setInterval(function(){
            console.log("interVal");
        },500);
    });

같은 결과 도출.

let a() 명령 없이 작동 이유?

setInterval(function(){
            console.log("interVal");

이 이미 함수 호출 표현식.

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.
(window 및 worker 인터페이스에서 제공되는 setInterval()메서드 ...(중략))

변수에 함수 할당하는 다른 예1

		let a = function(){
            console.log("작동될까?");
        }

작동되지 않음. 함수를 호출하지 않았기 때문.

변수에 함수 할당하는 다른 예2

		let a = $(".box").click(function(){
        console.log("작동될까?");

클릭을 함으로써 실행되기 때문에 console에 찍힘.
만약 제일 밑 줄에 return 3; 을 해주었다면, a에 3이 들어감. 3이 들어가기 전의 명령어들이 실행되어야 함.
이렇게 생각하면 쉽다..

setInterval의 return값?

This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval().
0이 아닌 반환값을 가짐.(그리 중요하지 X)

clearInterval

clearInterval(변수)

setInterval의 콜백함수를 제거함. (변수를 제거하는 것 X)

    $(document).ready(function(){
        let a = setInterval(function(){
            console.log("interVal");
        },500);
        
        $(".box").click(function(){
            clearInterval(a);
        });

setInterval메서드의 콜백함수를 제거함.

박스 클릭시 멈춤. 당연함.

clearInterval 후, a는?

 $(".box").click(function(){
            clearInterval(a);
            console.log(a);
        });

변수 a담긴 setInterval()의 return값 2가 출력.

콜백함수 & Single thread

콜백함수란?

특정 시점에서 호출 되도록 사용하는 함수

어떤 이벤트에 의해 호출 되도록 사용하는 함수

다른 함수의 인자로써 사용되는 함수

콜백함수 사용 이유?

JavaScript의 비동기식 처리 방식을 해결해 주기 위함

비동기식 처리 방식?

특정 코드의 연산이 끝날때까지 코드의 실행을 멈추지 않고, 다음 코드의 연산을 실행하는 자바스크립트의 특성. 먼저 실행된 코드의 작업이 끝나기 전, 더 나중에 실행된 코드의 작업이 끝날 수 있음.
--> 동시성을 가지고 있음.

콜백함수 예시

    <script>
        $(document).ready(function () {
            function cry() {
                console.log("cry");
            }


            function sing() {
                console.log("sing");
            }


            function dance() {
                console.log("dance");
            }

            function checkMoodCallBack(mood, goodCallback, badCallback){
            //콜백함수. 함수를 매게변수로 넣어줌.
                if(mood == "good"){
                    goodCallback();
                }else{
                    badCallback();
                }
            }
            checkMoodCallBack("good", dance, cry);
            checkMoodCallBack("bad", dance, cry);
        });
    </script>

Single Thread란?

일련의 처리를 단일 스레드만으로 직렬 처리하는 프로그래밍 방법(JavaScript)

Single Thread와 JavaScript의 만남

Java는 무겁고 어려운 언어(멀티 스레드 모델이었기 때문).--> 웹 개발을 위한 가볍고 쉬운 언어 필요 --> JavaScript탄생(Single Thread로..)

하지만 비동기적 프로그래밍 불가피. --> Web API, Callback, Event로 멀티스레드 동시성 지님.

참고 :

setInterval() MDN
자바스크립트는 왜 싱글 스레드를 선택했을까?
[자바스크립트] 콜백함수(CallBack) 예제를 통해 가장 쉽게 이해하기