함수 실행을 제어해보자. (feat.lodash)

 개발을 하다보면, 한번만 실행 되어야 하는 함수들도 있고, 또는 자주 실행하게 되면 성능상 문제가 되는경우가 있어서 몇 번실행 하였는지에 대해서 플래그값을 유지하면서 실행 하여야 하는 함수들이 있습니다.

 그러한 경우에 사용 할 수 있는 lodash 함수가 있어서 소개시켜드리려 합니다.

1. once 사용

 

 여러번 실행한다고 해도 한번만 실행 되게 하는 함수 입니다. 초기화용 함수를 작성할 때, 사용 하면 아주 편리하게 한번만 실행 되게 만들 수 있습니다. 앞으로 소개할 두개의 함수보다는 자주 사용하진 않습니다.

그 이유는 초기화시라고 했는데, 초기화시에 이벤트를 발생하는 라이브러리, 프레임워크가 많기 때문이죠.

2. debounce 사용

 위의 함수 실행된것을 보면 console.timeLog가 함수 실행 이후 1초뒤에 실행 된 것을 볼 수 있다. 또한 callTest('third')의 경우에는 두번을 연속으로 실행 하였으나 한번만 실행 되었다. debounce호 생성된 함수는 호출 된 후에 몇ms이후 동안 함수 호출이 없다면, 해당 함수를 평가해준다.

 위의 경우에는 많은 곳에서 사용 될 수 있다. 예를 들면 블로그를 작성하는 도중에 자동 저장을 시켜주기 위하여 타이밍을 잡는 경우라던지? 아니면 아이디의 중복확인을 버튼없이 적절한 타이밍에 실행 시켜주는 경우이다.

 즉 이벤트가 자주 발생하지만, 마지막 단락의 순간이 중요한 타이밍이고, 실시간성이 보장되지 않아도 되는 경우이다. 웹, 앱을 사용하다 보면 위의 경우는 꽤나 자주 사용 되는 방식이라는 것을 느 낄 수 있을 것이다.

 앞으로 자주 쓰게 될 것이니 있다는 것을 알고만 있자.

3. throttle 사용

throttle의 경우에는 위의 스크린샷 만으로는 특징을 확인 하기가 어려울 수 있다. throttle은 이벤트리스너의 수행의 간격을 조정한다고 보면 된다. 1 ~ 30초 동안 매 100ms마다 이벤트가 발생한다고 보자. 하지만 이벤트를 전부 처리하기 위해서 900ms정도가 필요하고, 버퍼로 100ms를 가지고 있다고 싶다고 하면 매 1초 마다 이벤트 리스너를 수행해야 할 것이다. 

그러한 경우에 사용 할 수 있다. 혹은 자주 발생하는 이벤트고 실시간성이 어느정도 필요하기는 한데... 대안이 없을 때 사용을 할 수도 있다. 예를들어 scroll 이벤트의 경우 다른 이벤트보다 매우 빈번하게 발생하는 이벤트이다. 해당 이벤트에 대한 리스너를 다는 것 자체만으로도 부담스러운 작업이겠지만, throttle과 함께라면 어느정도 실시간성을 보장하면서도 성능도 어느정도 방어 가능 하다.

 아래에 위 세가지를 사용해볼수 있게 아래에 작성해두었다. 한번 확인해보고 알아 두는 것을 추천합니다.