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를 출력하는 매우 간단한 함수입니다. 아래 코드를 보시죠.
import _ from 'lodash';
function sayHello() {
console.log('Hello');
}
코드는 단순합니다. 보시면 sayHello는 console.log()를 사용하여 Hello를 콘솔창에 출력합니다. 이제 각각 0초, 2초, 5초 후 sayHello() 함수를 호출하도록 아래와 같이 코드를 실행할 수 있습니다.
_.delay(sayHello, 0);
_.delay(sayHello, 2 * 1000);
_.delay(sayHello, 5 * 1000);
위 코드를 실행하면 모두 정해진 시간 후에 함수를 실행하여 메시지를 콘솔에 출력하게 됩니다.
@ 인자를 넘기는 예제, Pass arguments위에서 세 번째 옵션인
arguments는 인자를 넘겨 사용하는 것이 가능하도록 합니다. 만약 단일 인자를 사용하는 경우 아래처럼 who라는 argument를 사용하여 함수에 적용하는 것이 가능하죠. 아래와 같이 코드를 수정 후 실행해보겠습니다.
function sayHello(who) {
console.log('Hello ' + who);
}
_.delay(sayHello, 2 * 1000, 'Webisfree');
// 출력결과
'Hello Webisfree'
보시는 것처럼 인자가 전달되어 함수가 실행된 것을 확인할 수 있습니다. 만약 하나가 아닌 여러 개의 인자를 가진 경우라면 아래처럼 계속해서 다음 인자에 넘겨 사용할 수 있습니다.
function sayHello(who1, who2) {
console.log('Hello ' + who1 + ' ' + who2);
}
_.delay(sayHello, 2 * 1000, 'ABC', ' DEF');
// 출력결과
'Hello ABC DEF'
여기까지 lodash의 delay()에 대하여 간략하게 알아봤습니다.
@ clearTimeout()을 사용하기참고로 함수를 실행하면 숫자를 반환하게 됩니다. 이는 setTimeout() 동일한데요 ~ 그렇다면 clearTimeout()을 사용하여 타이머를 해제하는 것도 가능할까요? 실제로 가능합니다. 실행함수를 변수에 저장하고 이를 clearTimeout()에 사용하면 됩니다.
const test2 = _.delay(sayHello, 1000, 'Webisfree.com');
// delay()에 실행될 타이머 해제하기
clearTimeout(test2);
위 코드는 잘 동작하며 메시지 'Hello'는 출력되지 않습니다.
참고로 순수 자바스크립트를 사용하여 코드를 작성해도 가능하겠죠. 위 함수는 아래처럼 바꿀 수 있습니다.
setTimeout(sayHello, 10 * 1000);
여기까지 lodash를 사용하여 타이머를 사용한 시간 지연 호출 방법에 대하여 간략히 알아봤습니다.