개발

Javascript 함수 중복 호출 막기(제어)

255 views as of September 26, 2024.

앞단 서브밋에 해당하는 특정 함수를 여러번 실행되지 못하게 막을 필요성이 있어서 아래와 같은 함수를 적용해보았다.

function throttle(func, delay) {
    let lastCall = 0;
 
    return function(...args) {
        const now = new Date().getTime();
 
        if (now - lastCall >= delay) {
            lastCall = now;
            func.apply(this, args); // 원래 함수 호출
        }
    };
}
 
// 첫 번째는 바로 실행되고, 이후 특정시간 동안은 추가 호출을 무시함
const throttledUpdateWorkLog = throttle(updateWorkLog, 1000);Copy

원리는 무진장 간단하다.

함수 하나를 받아서 실행시킬때 그 함수의 호출시간을 lastCall 변수에 저장해두고 이후 함수 호출시 현재시간 now 에서 기존 lastCall 변수의 값을 뺀값이 delay의 값보다 크면 특정시간이 지났다고 가정해서 함수의 호출을, 그렇지 않으면 무시하는 방법이다.

여기서 not, lastCall, delay는 timestamp ms 단위로 제어한다.

throttle 함수 선언후 throttleYourFunction 으로 기존의 함수를 감싸서 다시 선언해주고 실제로 사용하는 곳에서는 기존 함수명을 사용하는게아니라 throttleYourFunction 명을 사용해서 호출하면된다.

기존에 yourFunction(params) 처럼 호출했다면 throttleYourFunction(params) 처럼 호출해야된다는 의미.

이 코드를 어디 적용할만하냐면 저장버튼이나 다운로드 버튼을 연타하는 고객의 행동을 제어할 수 있다. 이런 쓰로틀을 거는 행위는 물론 백단에서도 처리하는게 맞긴한데, 앞단에서 스크립트로 가볍게 제어할 수 있다는것도 이번에 알게 되었다. 끝.

#JavaScript