setTimeOut

 

setTimeOut은 JavaScript에서 제공하는 내장 함수 중 하나로, 일정 시간이 지난 후에 함수를 실행시킵니다. 이 함수는 비동기적으로 실행되어, 타이머가 만료되기 전에 다른 코드가 먼저 실행될 수 있습니다.

 

setTimeout 함수는 두 개의 인자를 받습니다. 첫 번째 인자로 실행할 함수를 받으며, 두 번째 인자로 일정 시간(ms)을 받습니다.

 

setTimeout(callback, delay);

 

여기서 callback은 실행할 함수를 가리키며, delay는 일정 시간을 가리킵니다. delay는 밀리초 단위로 입력되며, 1000밀리초는 1초를 의미합니다.

 

예를 들어, 아래와 같이 setTimeout 함수를 사용하면, 3초 후에 sayHello 함수가 실행됩니다.

 

function sayHello() {
  console.log("Hello!");
}

setTimeout(sayHello, 3000); // 3초 후에 sayHello 함수 실행

 

setTimeout 함수는 비동기적으로 실행되어, 다른 코드가 먼저 실행될 수 있습니다. 따라서, setTimeout 함수를 사용할 때는 타이머가 만료되기 전에 다른 코드를 실행하는 것을 방지하기 위해 콜백 함수를 사용하는 것이 좋습니다.

 

setTimeOut recursive

setTimeOut 함수를 재귀적으로 사용하면, setTimeout 콜백 함수 내에서 자기 자신을 호출함으로써 특정 조건이 충족될 때까지 일정한 간격으로 함수가 계속 호출됩니다.

아래는 1부터 10까지의 숫자를 1초 간격으로 출력하는 재귀적 setTimeout 함수의 예시입니다.

 

function count(num) {
  console.log(num);
  if (num === 10) {
    console.log("완료!");
    return;
  }
  setTimeout(function() {
    count(num + 1);
  }, 1000);
}

count(1);

 

이 함수는 각 로그 사이에 1초의 지연 시간을 두고 1부터 10까지의 숫자를 출력합니다. 10에 도달하면 "완료!"를 출력하고 재귀 호출을 중단합니다.

 

재귀적 setTimeout 함수를 사용할 때는 무한 루프를 방지하기 위한 기저 조건을 포함해야 하며, 잘못 사용하면 메모리 누수가 발생할 수 있습니다. 

 

debounce

setTimeOut을 이용한 디바운싱은 함수가 실행되는 속도를 제한하는 기술입니다. 이는 함수가 실행 비용이 크거나 사용자 입력에 응답하여 자주 호출되는 경우에 유용합니다. setTimeOut을 사용하면 함수 호출 사이에 지연을 추가하여 함수가 일정 시간이 지난 후에 한 번만 호출되도록 할 수 있습니다.

 

예를 들어, 사용자 스크롤에 대한 응답으로 웹 페이지를 업데이트하는 함수가 있다고 가정해봅시다. 사용자가 스크롤 할 때마다 이 함수를 호출하면 페이지가 응답하지 않을 수 있습니다. 이 함수를 디바운싱하면 지연을 추가하여 업데이트 사이에 일정한 간격을 두어 지정한 시간(지연)이 지난 후에만 함수가 한 번 호출되도록 할 수 있습니다.

let debounceTimeout;
window.addEventListener('resize', function() {
    clearTimeout(debounceTimeout);
    debounceTimeout = setTimeout(function() {
        console.log('The resize event handler is executed once every 500ms at most');
    }, 500);
});

 

위의 예시에서 debounce 함수는 함수와 지연을 인수로 받아 디바운싱된 새 함수를 반환합니다. 반환된 함수는 반복해서 호출할 수 있지만, 함수가 지정한 시간(1초)마다 한 번만 실행되도록 합니다. 이를 통해 함수가 너무 자주 호출되지 않도록하고 페이지가 반응성을 유지할 수 있습니다.

 

Throttling

함수의 실행 속도를 제한하는 기술입니다. 이는 함수가 실행 비용이 크거나 사용자 입력에 응답하여 자주 호출되는 경우에 유용합니다. setTimeOut을 사용하면 함수 호출 사이에 지연을 추가하여 함수가 일정 시간이 지난 후에 한 번만 호출되도록 할 수 있습니다.

예를 들어, 사용자 스크롤에 대한 응답으로 웹 페이지를 업데이트하는 함수가 있다고 가정해봅시다. 사용자가 스크롤 할 때마다 이 함수를 호출하면 페이지가 응답하지 않을 수 있습니다. 이 함수를 쓰로틀링하면 지연을 추가하여 업데이트 사이에 일정한 간격을 두어 지정한 시간(지연)이 지난 후에만 함수가 한 번 호출되도록 할 수 있습니다.

 

let throttleTimeout;
window.addEventListener('scroll', function() {
    if (!throttleTimeout) {
        throttleTimeout = setTimeout(function() {
            console.log('The scroll event handler is executed once every 500ms at most');
            throttleTimeout = null; // allow another call to the function
        }, 500);
    }
});

 

위의 예시에서 setTimeout을 사용하여 리사이즈 이벤트 핸들러를 쓰로틀링합니다. 핸들러는 최대 500ms마다 한 번 실행되며, 코드가 너무 자주 실행되지 않도록 하여 페이지 반응성을 유지합니다.

쓰로틀링은 디바운싱과 비슷한 기술입니다. 디바운싱은 함수가 호출된 마지막 호출 후 일정 시간이 지난 후에 함수를 실행하는 반면, 쓰로틀링은 함수가 일정한 시간 간격으로 한 번만 호출되도록 제한합니다.

 

비동기 프로그래밍

setTimeout은 JavaScript에서 비동기 작업을 시뮬레이트하는 데 자주 사용됩니다. 이는 테스트에 유용하거나 호출 스택이 지워질 때까지 일부 코드의 실행을 지연해야 할 때 유용할 수 있습니다.

console.log('Hello,');
setTimeout(function() {
    console.log('world!');
}, 0);
console.log('How are you?');

// Output:
// Hello,
// How are you?
// world!

0의 지연이 있는 setTimeout은 콜백 함수가 바로 실행된다는 것을 의미하지 않습니다. 이는 현재 실행 중인 코드가 완료되고 호출 스택이 비어 있으면 실행할 작업 대기열에 함수가 추가됨을 의미합니다.

 

setTimeOut과 setInterval 비교

setTimeOut과 setInterval은 일정 시간 후에 코드를 실행할 수 있도록 JavaScript에서 제공하는 메서드입니다. 하지만 둘 사이에는 몇 가지 차이점이 있습니다.

 

setTimeOut은 일정 시간이 경과한 후에 코드를 한 번 실행하는 데 사용됩니다. 타이머가 만료되면 코드는 한 번 실행됩니다. 반면에 setInterval은 일정한 간격으로 코드를 반복적으로 실행하는 데 사용됩니다. 코드는 즉시 한 번 실행되고, 이후 지정된 간격이 경과할 때마다 반복적으로 실행됩니다.

 

setTimeOut을 사용한 예시는 다음과 같습니다.

setTimeout(function() {
  console.log("Hello, world!");
}, 1000);

이 코드는 1000밀리초(1초)의 지연 후에 "Hello, world!"를 콘솔에 출력합니다.

 

setInterval을 사용한 예시는 다음과 같습니다.

let count = 0;

const intervalId = setInterval(function() {
  console.log(count);
  count++;
  if (count === 10) {
    clearInterval(intervalId);
  }
}, 1000);

 

이 코드는 0부터 9까지의 숫자를 콘솔에 출력하며, 각 숫자 사이에 1000밀리초(1초)의 지연이 있습니다. count가 10이 되면 clearInterval을 사용하여 인터벌을 종료합니다.

 

일반적으로 setInterval은 코드를 반복적으로 실행하는 데 유용하며, setTimeOut은 일정 시간 후에 한 번 코드를 실행하는 데 유용합니다. 그러나 setInterval을 사용할 때는 간격이 너무 짧으면 성능 이슈가 발생할 수 있으므로 주의해야 합니다. 많은 경우 setTimeout을 사용하고 함수를 재귀적으로 호출하는 것이 더 나은 선택일 수 있습니다.

 

JavaScript의 setInterval 및 setTimeout 기능은 대부분의 경우 아주 빠르고 잘 작동하지만, 몇 가지 문제점이 있을 수 있습니다.

 

차단 동작(Blocking behavior) : JavaScript는 한 번에 한 가지 작업만 할 수 있는 단일 스레드입니다. 실행 시간이 긴 코드가 있다면, setInterval이나 setTimeout에 있는 콜백 함수와 함께 다른 코드의 실행을 막을 수 있습니다. 그래서 setInterval이나 setTimeout 콜백 안에서 많은 계산을 하면 예상한 대로 자주 실행되지 않을 수 있습니다.

 

최소 지연(Minimum delay) : 대부분의 최신 브라우저에서 setInterval 및 setTimeout 함수의 최소 지연은 4밀리초입니다. 이 값 이하로 설정하면 자동으로 4밀리초로 설정됩니다. 이 값은 일반적으로 문제가 되지 않지만 고해상도 타이머나 빠른 게임 루프를 만들 때는 문제가 될 수 있습니다.

 

비활성 탭(Inactive tabs) : 웹 브라우저에서는 비활성 탭에서 setInterval 및 setTimeout을 제한하여 CPU 및 배터리 전원을 절약합니다. 따라서 콜백 함수가 자주 실행되지 않을 수 있습니다. 이로 인해 지연이 발생하며, 스크립트가 정확한 타이밍에 의존하는 경우 문제가 생길 수 있습니다. 지연 시간은 1초 이상이 될 수 있습니다.

 

메모리 누수(Memory leaks) : setInterval과 setTimeout를 사용할 때 주의하지 않으면 메모리 누수가 발생할 수 있습니다. 예를 들어, 객체를 참조하는 setInterval이 있다면 이 객체는 실행 중인 간격에서 더 이상 사용되지 않더라도 가비지로 수집되지 않습니다. 이로 인해 시간이 지남에 따라 메모리 사용량이 늘어날 수 있습니다.

 

setInterval 또는 setTimeout으로 성능 문제가 발생하는 경우 대안을 고려하는 것이 좋습니다. 애니메이션에 대해서는, 이 목적을 위해 특별히 설계되고 더 나은 성능을 제공하는 'requestAnimationFrame'을 사용할 수 있습니다.

 

반복 작업의 경우, 별도의 스레드에서 실행되고 기본 스레드를 차단하지 않는 웹 워커를 고려할 수 있습니다.