[react] throttle 적용하기

[react] throttle 적용하기

 

react에 throttle를 

적용한 코드입니다. 

throttle

동일한 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격으로 콜백 함수의 실행을 보장합니다. 즉 일정시간동안 1개의 콜백함수를 실행하게 하여 짧은시간 동안 불필요하게 동일한 함수 실행을 막습니다.

 

화면 구현

 

throttle 코드

• 제로초님의 블로그를 참조한 코드
• rottle: 동일 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격(밀리세컨드)으로 콜백 함수의 실행을 보장합니다.

function throttle(fetchData, delay = 600) { //throttle 사용코드
    let timer;
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                fetchData.apply(this, arguments)
            }, delay)
        }
    }
}

 

throttle의 다른 코드

처음에 사용한 코드였으나 작동이 되었다 안되었다 하여 최종적으로 상단의 코드를 사용하였습니다. 

function throttle(fetchData, limit = 2000) {
    let waiting = false
    return function () {
        if (!waiting) {
            fetchData.apply(this, arguments)
            waiting = true
            setTimeout(() => { waiting = false }, limit)
        }
    }
}

 

적용 코드

const fetchData = (day) => {
    if (조건) {
        toast(<p>해당 일의 데이터가 없습니다</p>, toastCommonProps('bottom-center', 'toast_alert'))
    } else {
        데이터 불러오기
    }
}


function throttle(fetchData, delay = 600) { //throttle 사용코드
    let timer;
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                timer = null;
                fetchData.apply(this, arguments)
            }, delay)
        }
    }
}

//클릭 이벤트
<div onClick={throttle(() => fetchData(one.day))} >요소</div>