lodash delay 시간 지연 메소드 정보

lodash 메소드 중 delay 메소드에 대하여 알아봅니다.

# lodash method, delay

lodash 메소드 중 하나인 delay는 일정 시간을 지연시킨 후 특정 함수를 실행할 수 있는 메소드입니다. setTimeout처럼 동작하는 함수를 간단하고 쉽게 만들 수 있죠. 먼저 간단한 문법은 아래와 같습니다.


_.delay(function, delayTime, arguments)


이 때 다음과 같이 세 가지 인자 function, delayTime, arguments를 전달할 수 있으며 각각 아래의 목적으로 사용됩니다.

function : 시간 지연 뒤 실행하게 될 함수
delayTime : 밀리세컨드 단위의 지연시킬 시간
arguments : <Optional> 함수에 전달할 수 있는 인자

참고 여기서 arguments의 값은 콤마를 사용해 여러 개를 사용할 수 있습니다. 즉 여러 개의 arguments 값을 넘기는 것이 가능하죠. 그럼 몇 가지 예제를 만들어 사용해보겠습니다.

! lodash delay 메소드 예제보기

아래에서는 일정시간이 지나 함수를 실행시키는 예제를 만들어보려고 합니다. 이때 _.delay()를 사용하며 만들어질 함수 sayHello()는 정해진 일정 시간이 지나면 Hello를 출력하는 매우 간단한 함수입니다. 아래 코드를 보시죠.

코드는 단순합니다. 보시면 sayHello는 console.log()를 사용하여 Hello를 콘솔창에 출력합니다. 이제 각각 0초, 2초, 5초 후 sayHello() 함수를 호출하도록 아래와 같이 코드를 실행할 수 있습니다.

위 코드를 실행하면 모두 정해진 시간 후에 함수를 실행하여 메시지를 콘솔에 출력하게 됩니다.


@ 인자를 넘기는 예제, Pass arguments
위에서 세 번째 옵션인 arguments는 인자를 넘겨 사용하는 것이 가능하도록 합니다. 만약 단일 인자를 사용하는 경우 아래처럼 who라는 argument를 사용하여 함수에 적용하는 것이 가능하죠. 아래와 같이 코드를 수정 후 실행해보겠습니다.

보시는 것처럼 인자가 전달되어 함수가 실행된 것을 확인할 수 있습니다. 만약 하나가 아닌 여러 개의 인자를 가진 경우라면 아래처럼 계속해서 다음 인자에 넘겨 사용할 수 있습니다.

여기까지 lodash의 delay()에 대하여 간략하게 알아봤습니다.


@ clearTimeout()을 사용하기
참고로 함수를 실행하면 숫자를 반환하게 됩니다. 이는 setTimeout() 동일한데요 ~ 그렇다면 clearTimeout()을 사용하여 타이머를 해제하는 것도 가능할까요? 실제로 가능합니다. 실행함수를 변수에 저장하고 이를 clearTimeout()에 사용하면 됩니다.

위 코드는 잘 동작하며 메시지 'Hello'는 출력되지 않습니다.

참고로 순수 자바스크립트를 사용하여 코드를 작성해도 가능하겠죠. 위 함수는 아래처럼 바꿀 수 있습니다.


여기까지 lodash를 사용하여 타이머를 사용한 시간 지연 호출 방법에 대하여 간략히 알아봤습니다.