6.1단일 스레드 환경

6.1 단일 스레드 환경

6.1.1 자바스크립트 환경

가. 단일스레드 환경을 가진 자바스크립트

나. 스레드 큐

• 단일스레드 환경에서 지연이 발생을 처리함

• 어떠한 순서로 함수나 기능을 수행할 지 결정목록

• FIFO (First-In First-Out) 정책을 가지고 있다.

6.1.2 setTimeout()

가. 사용법

setTimeOut(func, time)

지정한 time이 지난 후, func 한번만 이벤트 발생

나. 예제1(250p)

<button id="addItem" />

(function () {
    var buttonAddItem = document.getElementById("addItem");

    buttonAddItem.onclick = function () {
        console.log("### 1 버튼클릭");

        setTimeout(function () {
            console.log("### 3 setTimeout");
        }, 2000);

	//10초 지연
        sleep(10 * 1000);
    };

    function sleep(waitMilliseconds) {
        var waitUntil = Date.now() + waitMilliseconds;
        while(Date.now() < waitUntil) {
            ;
        }
	console.log("### 2 sleep함수로 10초 지연");
    }
}());

Q.setTimeOut()은 몇초 뒤 콜백 함수가 실행될까?

setTimeOut()의 콜백함수가 10초 좀 지난 뒤출력됨
why? 스레드큐로 인하여
setTimeOut(func, 2000)는 2초 후에 콜백함수를 대기시키므로
sleep()이 먼저 실행하여 10초 지연시키기 때문이다.

• 실행결과

다. 예제2(252p)

<button id="addItem" />

(function () {
    var buttonAddItem = document.getElementById("addItem");

    buttonAddItem.onclick = function () {
        console.log("### 1. 버튼클릭");

        setTimeout(function () {
            console.log("### 2. 첫번째 setTimeout");
            sleep(10*1000); // 10초 지연
        }, 2000);

        setTimeout(function () {
            console.log("### 3. 두번째 setTimeout");
        }, 2000);

        sleep(10*1000); // 10초 지연
    };

    function sleep(waitMilliseconds) {
        var waitUntil = Date.now() + waitMilliseconds;
        while(Date.now() < waitUntil) {
            ;
        }
        console.log("### sleep 함수 실행");
    }
}());

Q. 두번째 setTimeOut()은 몇초 뒤 콜백 함수가 실행될까?

두번째 setTimeOut()의 콜백함수가 20초 좀 지난 뒤출력됨
why? 스레드큐로 인해
첫번째 setTimeOut()과 두번째 setTimeOut() 콜백함수를 대기시키고 sleep()를 먼저 실행하기때문이다.

• 실행결과

6.1.2 setInterval()

가. 사용법

setInterval(func, time)

일정한 시간 time간격으로, func 이벤트 발생
clearInterval() 함수를 통해 멈출 수 있음

나. 예제1(256p)

<button id="addItem" />

var buttonAddItem = document.getElementById("addItem");

buttonAddItem.onclick = function () {
    var intervalCount = 0,
        intervalId;

    console.log("###1. 버튼클릭");

    intervalId = setInterval(function () {
        if (++intervalCount > 3) {
            clearInterval(intervalId);
            return;
        }
        console.log("### intervalId 실행"+intervalCount);
    }, 3000);

    setTimeout(function () {
        console.log("### setTimeout 실행");
        sleep(10*1000);
    }, 5000);

    sleep(10*1000);
};

function sleep(waitMilliseconds) {
    var waitUntil = Date.now() + waitMilliseconds;
    while(Date.now() < waitUntil) {
        ;
    }
}
}());

Q. 마지막에 어떤 함수가 실행 될까?

intervalId() 함수이다.

1. sleep()함수가 10초 동안 실행되면서
2. setInterval()함수의 첫번째 콜백 함수가 호출되어, 
   단일 스레드큐에 등록된다.
3. 후에 setTimeout()이 스레드큐에 등록된다.
4. setInterval()함수의 두번째 콜백 함수가 호출되어, 
   단일 스레드큐에 등록된다.
5. setInterval()함수의 세번째 콜백 함수가 호출되어, 
   단일 스레드큐에 등록되며, 
   clearInterval(intervalId); 실행되어 setInterval()함수가 멈춘다.

• 실행결과

---

258~264p

• setInterval() 함수로 텍스트 시계를 구현