javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지

2016.12.09 14:24language/javascript


javascript 중복 submit 방지 / 다중 클릭 방지 / 중복 클릭 방지

 

 

웹 페이지에서 form submit 이벤트나 버튼의 클릭 등 이벤트가 여러번 발생하면 곤란할 때가 있다.

 

예를 들어 글을 등록할 때 등록버튼을 빠르게 여러번 클릭하면 같은 글이 여러번 등록될 수 있다.

 

또한 과도한 요청으로 인하여 서버에 부하가 올 수 있고

 

때때로 예기치 못한 오류가 발생할 수 도 있다.

 

이럴 경우 클라이언트 즉 javascript에서 submit 등 이벤트의 중복 실행을 방지해야 한다.

 



 

 

다음과 같은 HTML 파일이 있다고 가정하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE>
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    </HEAD>
    <script>
    function insert(){
        alert("등록");
    }
    </script>
    <BODY>
        <form name="form">
            <input type="button" value="등록" onclick="insert();">
        </form>
    </BODY>
</HTML>
cs

 

14 번째 줄을 보면 등록 버튼이 있다.

 

이 버튼을 누를때마다 등록이 된다고 가정해 보자.

 

소스상으로는 alert 창이 계속 뜰것이다.

 

연속적으로 클릭하게 된다면 누른 횟수만큼 등록이 이뤄진다.

 

우리는 이 버튼이 1번만 동작하도록 해야한다.

 



 

아래 함수를 살펴보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * 중복서브밋 방지
 * 
 * @returns {Boolean}
 */
var doubleSubmitFlag = false;
function doubleSubmitCheck(){
    if(doubleSubmitFlag){
        return doubleSubmitFlag;
    }else{
        doubleSubmitFlag = true;
        return false;
    }
}
cs

6# : boolean 타입의 플래그 변수

8# ~ 9# : 플래그 변수가 true 이면 플래그 변수를 return 한다.

10# ~ 12# : 플래그 변수가 false 이면 플래그 변수에 true를 대입하고 false 를 return한다.

 

위 dubleSubmitCheck 함수를 호출하면 최초 1회는 false를 반환한다.

 

2회부터는 계속 true를 반환하도록 되어있다.

 

그 말인 즉슨 false를 한번 return 하고 다시는 false를 return 하지 않고 true만 return 한다.

 

이 함수를 이용해서 처음 설명한 HTML 파일의 등록버튼을 제어해보자.

 

 

맨 위의 HTML 파일에 dubleSubmitCheck 함수를 추가한 전체 HTML 파일이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE>
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    </HEAD>
    <script>
    /**
     * 중복서브밋 방지
     * 
     * @returns {Boolean}
     */
    var doubleSubmitFlag = false;
    function doubleSubmitCheck(){
        if(doubleSubmitFlag){
            return doubleSubmitFlag;
        }else{
            doubleSubmitFlag = true;
            return false;
        }
    }
 
    function insert(){
        if(doubleSubmitCheck()) return;
 
        alert("등록");
    }
    </script>
    <BODY>
        <form name="form">
            <input type="button" value="등록" onclick="insert();">
        </form>
    </BODY>
</HTML>
 
cs

13# ~ 21# : 위에서 설명한 doubleSubmitCheck 함수이다.

24# : 등록하기 전에 doubleSubmitCheck  함수를 호출한다.

doubleSubmitCheck 함수의 return 값이 false 이면 등록하고 true이면 return 하여 insert 함수를 빠져나온다.

위에서 설명했지만 doubleSubmitCheck 함수는 한번 false를 return하고 다음부터는 계속 true만 return 한다.

 

 

TIP

doubleSubmitCheck 함수를 공통 js 파일에 작성하여 공통모듈처럼 사용하면 편하게 작성할 수 있다.