[JS] 버튼 중복 클릭 방지

쿠폰과 같이 사용자가 쿠폰 받기 버튼을 누름으로써 서버에서 응답으로 쿠폰을 받았을 때 그 후엔 쿠폰 버튼은 못누르게 막힌다.

이렇게 간단하게 생각하면 쉽지만 이때 미친듯이 클릭을 하면 요청이 여러 번가서 응답 또한 여러 번 오게 된다. 

 

물론 서버 쪽에서 쿠폰과 같은 베네핏을 이미 한번 받은 사람은 못 받게끔 처리를 해놨겠지만, 클라이언트 단에선 성공 메시지와 실패 메시지를 여러 개 받는 케이스가 생길 수도 있기 때문에 이를 사전에 막아주는 게 사용자 경험 측면에서도 좋고 쓸데없는 요청을 보내는 걸 방지해주므로 서버 쪽에도 좋다고 생각한다.

 

아래 코드는 vue 기반의 코드이다. data는 상태를 정의하는 곳, methods는 한 컴포넌트에서 쓰는 함수를 정의하는 곳이다.

 

1. 최초 클릭 여부를 알려주는 flag (처음엔 당연히 false, 클릭한 이후엔 true)를 상태로 잡아둔다.

 

2. 클릭을 이미 한번 했을 경우 flag가 true이므로 true 그대로 리턴, 안했을 경우엔 이 flag를 true로 바꾸고 false를 리턴하는 함수를 만들어둔다. (checkDoubleClick 함수) -> 즉 첫 클릭 시도때만 false를 리턴하고 그 이후엔 계속 true를 리턴하는 함수이다.

 

3. 쿠폰받기 클릭 시 checkDoubleClick 함수의 결과값으로 서버에 요청을 보낼지 말지 결정한다.

첫 클릭일 시 if(checkDoubleClick())문에서 이미 false이기 때문에 서버로 요청을 보내지만,

중복 클릭일땐 if문에서 true가 나오기 때문에 다음 코드로 넘어가지 않는다. 

 

다만, 첫 클릭일 때 에러가 나서 쿠폰을 못 받았을 땐 다시 최초 클릭 여부를 false로 바꿔서 요청을 다시 보내야하므로 catch문에서 이를 false로 다시 바꿔준다.

data(){
    doubleClickFlag: false;
},
methods: {
    checkDoubleClick(){
        if(this.doubleCheckFlag){
            return this.doubleCheckFlag;
    	}else{
            this.doubleCheckFlag = true;
            return false;
    	}
    },
    getCoupon(level){
    	if(this.checkDoubleClick()) return;
        this.$axios.post(`/mypage/rewards?level=${level}`)
            .then((res) => {
            	if(res.status == 200){
                // 쿠폰 받은 후 성공 메시지 띄우고 상태 바꾸는 코드
                }
            })
            .catch((err) => {
            	// 서버 쪽 에러에 대한 처리 코드
                this.doubleClickFlag = false;
            })
    }
}