ajax 자체의 버그라고 보여지는데 어떻게들 생각하시나요??
본문
ajax방식을 사용하여
쿼리를 사용하는 일반방식이 있습니다.
버튼을 누르면 ajax로 데이터가 전달되고 쿼리를 실행하는건데여
핸드폰으로 포인트 완료를 눌렀는데 포인트가 두번실행되어 2배의 점수가 쌓였습니다.
저는 이게 오류라고 보는데여 컴퓨터에서 완료버튼을 빠르게 두번 따닥하니까 완료되었다는 메세지 자바스크립트
alert창이 두번뜨더군여. 완료를 누르면 한번만 포인트가 쌓여야되는데 따닥하니까 완료되었다는
창이 두번뜨고 결국에 점수가 두번 쌓이더라구여.
점수완료를 한번한건데 두번쌓이면 크나큰 버그가 아니라고 할수없는데 다른분들은 어떠신가요??
대략적인 소스는 다음과 같습니다.
<script>
$('.chargebtn').on('click', function(e){
var temp_arr = $(this).attr('id').split("_");
var temp_id = temp_arr[1];
var jsonData = { 'idx': temp_id, 'status': 'complete' };
e.preventDefault();
$.post('/point/PointChargeComp', jsonData, function(data){runDataJsonResult(data);});
});
</script>
위처럼 chargebtn을 누르면 데이터가 /point/PointChargeComp 경로로 전달됩니다.
이런방식으로 모든 소스가 되어있는데 마우스로 빠르게 따닥하고 클릭하면
쿼리가 두번실행되는거 같습니다.
재빠르게하면 세번까지도 쿼리가 실행될수도 -_-;;
이런적이 예전에는 한번있어도 대수롭지 않게 생각했는데
점수자체가 두배로 쌓인다고 생각하니 큰문제가 아니라고 볼수밖에 없네요.
이부분이 현금이라고 생각하면 더 문제일거같네여
지금 거의가 ajax를 사용할텐데 어떻게들 보시나요?
답변 3
이를 막기위한 여러방법이 있으나, global 인 ajaxStart 와 ajaxStop 을 이용하면, 가능할 것 같습니다 :-)
ajaxStop 은 비동기적으로 실행중인 모든 ajax 가 끝난 뒤, call 됩니다.
https://api.jquery.com/Ajax_Events/
$(document).ajaxStart(function(e) {
window.ajaxCheck = 1;
});
$(document).ajaxStop(function(e) {
window.ajaxCheck = null;
});
$('.chargebtn').on('click', function(e){
if( window.ajaxCheck == 1 ) return false;
...실행할 JS...
});
단순히 실행 스크립트 위에
$(document).ajaxStart(function(e) {
window.ajaxCheck = 1;
});
$(document).ajaxStop(function(e) {
window.ajaxCheck = null;
});
들어가면 한번 실행되고 멈춘다는건가여?
ajax 가 시작되면, window.ajaxCheck 의 값이 1이 되므로, 더블클릭이 발생해도 해당 ajax 또는 동시에 실행되는 ajax 가 다 끝나기 전까지는 jQuery 의 click 이벤트를 멈출 수 있습니다 :-)
window 객체에 ajaxCheck 라는 object 를 추가하여 제어했기 때문에, jQuery 아래, ajaxStart 와 ajaxStop 을 추가하신 후, 어떤 이벤트(click, mouseenter 등등) 이건 원하는 작업 전에,
if( window.ajaxCheck == 1 ) return false;
를 사용하신다면 ajax 실행 중에는 작동하지 않을 것입니다~
덧글 감사합니다.
이방식이 제일 좋아보이네요.
ajax 옵션에 동기화 옵션 async: true 설정하는 부분도 있는데
이방식은 제이쿼리 소스자체가 달라져서 기존에 쓰는 제이쿼리안에
위 코드가 들어가면 될거같네요.
테스트도 해보았고 잘되는거같습니다.
해결본거같습니다. 채택 하겠습니다.
클릭시마다 아작스가 호출되어 디비에 입력이 되어 버리는 것이라면,
스크립트 단에서는 막을 수 없을 것 같은데요..
디비 입력하는 곳에서 체크해서 막으셔야 할 것 같습니다.
위 테스터님이 말하신 방식이 정석인거같네여. 스크립트에서 막는게 맞는거같아여
해결하는 방법은 여러가지가 되네요.
이상하네요.
제가 사용하는 ajax는 클릭할때 정확하게 1번만 실행이 되요.
스크립트 코드에 문제가 있는겁니다.
on를 빼시고 click 으로 만 사용해보세요.
제가 밖이라 소스코드를 올릴 상황이 아니라^^
