아하 로고
검색 이미지
생활꿀팁 이미지
생활꿀팁생활
생활꿀팁 이미지
생활꿀팁생활
하얀고슴도치236
하얀고슴도치23621.05.07

javascript 에서 익명함수의 실행을 중지시키는 법은 무엇인가요??

javascript 에서 익명함수의 실행을 중지시키는 법은 무엇인가요??

이미 익명함수로 실행이 시작된 함수가 있는데 중지시키는 법을 모르겠습니다.

일반 함수의 경우 해당 함수의 정의를 바꿔버리거나 하는 방식으로 수정이 가능한데...

익명함수를 실행중지 시키거나 수정하는 법이 궁금합니다.

55글자 더 채워주세요.
답변의 개수1개의 답변이 있어요!
  • 탈퇴한 사용자
    탈퇴한 사용자21.05.08

    프로그래밍에서 광범위한 의미로 사용되는 용어중에 핸들(handle)이라는 것이 있습니다.

    자동차에 스티어링 휠을 흔히 핸들이라고 보통 부르는데 자동자의 조향(가고자 하는 방향을 조정하는 것)은 실제 바퀴가 하지만 운전자가 운전하면서 직접 바쿼를 돌릴 수 없기에 이런 조작을 할 수 있는 간접적인 방법을 자동자는 제공을 하고 있습니다.

    원도우라는 운영체체를 사용하고 있다면 h가 앞에 붙은 것들이 handle을 의미하는데 파일, 스레드, 그래픽 이미지 같은 다양한 시스템 자원들을 처리할 수 있기 위한 수단으로 제공됩니다.

    ref. https://docs.microsoft.com/en-us/windows/win32/sysinfo/handles-and-objects

    다시 질문으로 돌아와서 자바스크립트에서는 어떤 방법으로 익명함수에 대한 실행의 중지시킬 수 있을까요?

    아래는 setInterval을 이용하여주기적으로 익명함수를 호출하는 자바스크립트 예제입니다.

    setInterval(function() { console.log('hi there~'); }, 1000);

    'hi there~'이라는 문장을 콘솔에 출력하는 익명함수가 첫번째 인자로 넘겨지고, 주기는 1초(1000ms)마다 호출을 시킵니다.

    실행을 해보면 위와 같이 1초마다 메시지가 찍히고 있음을 알고 있습니다.

    만약에 5초 후에 중지를 시키고 싶다면 어떻게 하면 될까요?

    setInterval 메서드의 경우 함수 호출을 컨트롤 하기위한 타이머 ID(Timer ID)를 반환합니다.
    이런 타이머 ID가 위에서 이야기했던 핸들과 비슷한 개념이라고 볼 수 있습니다.

    코드로 설명하면 아래와 같습니다.

    let timerId = setInterval(function() { console.log('hi there~'); }, 1000); setTimeout(function() { clearInterval(timerId); }, 5000);

    실행해보면 아래와 같이 4번만 출력이 되고 정지하는 것을 알 수 있습니다.

    위의 예는 setInterval 을 예로 들어서 설명을 했지만 이런 예는 광범위하게 사용이 되고 있습니다.
    이런 반환되는 핸들을 통해서 제어도 가능하지만 어떤 경우는 익명함수를 제어하기 위한 인자를 이용해서도 제어가 가능하기도 합니다.

    아래의 예제는 익명함수를 setTimeout를 통해 실행하는 예제입니다.
    (이런 반복문은 별로 좋은 예는 아니지만 케이스를 만들기 위해 만들어낸 것입니다.)

    setTimeout(function() { var i; for (i = 0; i < 90000000000; i++) { console.log(`Running : ${i}`); } }, 0);

    대기시간을 0으로 주었기 때문에 실행을 하면 바로 Running 이라는 문장을 콘솔에 출력합니다.

    만약에 중간에 루프를 종료를 하기 위해서는 어떻게 해야할까요?

    setTimeout 역시 Timer ID를 돌려줍니다. 하지만 이 핸들은 해당 시작에 대해 제어를 하는 목적이지 이미 실행된 익명함수에 대해 중단을 할 수는 없습니다.
    또한 두 번째 setTimeout은 현재 실행 중인 코드의 실행이 종료 되었을 때 실행이 됩니다.

    let timerId = setTimeout(function() { var i; for (i = 0; i < 13414609; i++) { console.log(`Running : ${i}`); } }, 0); setTimeout(function() { clearInterval(timerId); // 이미 익명함수는 실행된 후이기 때문에 해당 익명함수를 멈출 수 없습니다. }, 1000);


    자바스크립트는 단일 스레드로 동작하기 때문에 이런 for loop 같은 스케쥴 점유적인 활동에는 다른 스케쥴러가 끼어들 수(interrupt) 없기 때문입니다.

    따라서 이런 경우에는 익명함수에 외부의 변수를 참고하여 통제를 하는 방법이 있을 수 있겠습니다.

    let isStop = false; let timerId = setTimeout(function() { var i; for (i = 0; i < 13414609; i++) { if (isStop) { console.log(`byebye : ${i}`); break; } console.log(`Running : ${i}`); } }, 0); // stop by external isStop = true;

    하지만 아래와 같은 코드는 동작하지 않습니다.

    let isStop = false; let timerId = setTimeout(function() { var i; for (i = 0; i < 10; i++) { if (isStop) { console.log(`byebye : ${i}`); break; } console.log(`Running : ${i}`); } }, 0); // stop by external setTimeout(function() { console.log('stop triggered!'); isStop = true; }, 1); console.log('after stop triggered!');

    왜냐하면 일단 for loop 이 시작하면 종료될 때까지 다른 함수의 호출 스케쥴링(scheduling a call)이 멈추기 때문입니다.