2016. 12. 9. 14:24ㆍlanguage/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 파일에 작성하여 공통모듈처럼 사용하면 편하게 작성할 수 있다.
'language > javascript' 카테고리의 다른 글
| javascript encoding url / url encode decode 하기 / javascript 한글 깨짐 (0) | 2017.06.28 |
|---|---|
| javascript 프로그레스바 / 로딩바 플러그인 (0) | 2017.05.29 |
| html2canvas 적용 시 table border 안나오는 문제 (4) | 2017.03.13 |
| JSP 페이지 이미지로 저장, 웹페이지 이미지로 저장, 페이지 이미지 캡쳐 (12) | 2017.03.13 |
| javascript showModalDialog 에서 window.open 시 session 이슈 (0) | 2017.01.05 |
| dwr 에서 request, session 사용하기 / WebContextFactory is deprecated (0) | 2016.12.08 |
| javascript | 모바일 브라우저 userAgent로 디바이스 구분하기 / android ios 구분하기 (0) | 2016.08.10 |
| javascript 계산기 / 자바스크립트 계산기 만들기 (2) | 2016.06.28 |
| javascript history 삭제 / href replace 비교 (4) | 2016.06.01 |
| [javascript 기초 강좌] 12. 이벤트와 이벤트 객체 [ event ] (18) | 2016.05.02 |