티스토리 뷰
✅ 쪽지 전송 버튼을 연타할 경우 함수가 중복적으로 실행되어나가는 경우에 대한 글.
예전에 jquery로 구성되어있던 파일에서도 동일하게 발생되었는데
$("#ID). on 함수를 -> $("#ID). one 함수로
$("#ID). off를 이용하는 방법이 아닌
이번엔 onclick 함수에서 동일하게 발생되어 글을 작성해보았다.
다양한 케이스 살펴보기
인터넷에 "함수, ajax의 중복 요청 막기"에 대해 검색해보면 다양한 방법이 뜬다.
하지만 나의 경우에는
ajax : false 처리를 하거나 ajax를 한 번만 실행해도 먹질 않았는데
그 이유는 타겟 하는 것이 ajax가 아닌 함수이기 때문이었다.
그래서 나는 요청 진행을 막는 코드 상태 변수를 만들어
전송 유무에 따라 함수를 한 번만 실행하는 로직을 구현하였다.
상태 변수를 만들어 ajax를 막기
tip1 : console.log에 집중해서 보세요.
tip2 : 함수 껍데기만 유지하고 일부 불필요한 내용은 삭제했습니다.
<로직>
<HTML>
<button onclick="sendMessage()">보내기</button>
</HTML>
<script>
var isRun = false;
console.log("첫번쨰 isRun: " + isRun); <-------------
function sendMessage(){
if (isRun == true) {
console.log("두번쨰 isRun: " + isRun); <-------------
return false;
}
isRun = true;
console.log("세번쨰 isRun: " + isRun); <-------------
ajaxPost("/url", Data, (success) => {
if(data.code === 200) {
isRun = false;
console.log("네번쨰 isRun: " + isRun); <-------------
}
}
.
.
.
</script>여러 번 클릭했을 때 console.log의 결과
여기서 핵심은 세 번째, 네 번째 console이 찍힌다는 것이다.
나는 다중 클릭 시 첫 번째 함수가 실행되고, ajax가 실행하기 전에 함수가 실행될 줄 알았는데
ajax가 여러 번 중복적으로 실행 되는 것을 확인할 수 있다.
변수 위치 수정과 location.replace 추가
3-1. 여러번 클릭했을 때 console.log의 결과
var isRun = false;
console.log("첫번쨰 isRun: " + isRun); <-------------------------
function sendMessage(){
if (isRun == true) {
console.log("두번쨰 isRun: " + isRun); <-------------------------
return false;
}
ajaxPost("/URL", data, (success) => {
if(data.code === 200) {
isRun = true;
console.log("네번쨰 isRun: " + isRun); <-------------------------
location.replace("/URL");
}
}
해당 로직은 아래의 로직을 따른다.
1. isRun을 false로 둔 뒤
2. ajax가 실행되면 isRun을 true로 변경해준다.
3. if(isRun == true) {
return false;
}
if문 부분의 isRun 상태가 true가 되고, return false가 되어 해당 sendMessage함수가 두 번 이상 실행되지 않는다.
좋아요 한 번씩 부탁드립니다
포스팅에 큰 힘이 됩니다!
- Total
- Today
- Yesterday
