PHP에서 CRUD 기능을 구축하던 중, 동작처리를 요청한 페이지가 호출 완료 된 후 브라우저를 닫지 않았을 경우에 중복으로 호출되는 문제가 발생하였습니다.

 단순하게 동작이 완료 된 후에 다른 사이트로 강제 이동시키는 방법으로 뗌질(?)한 경험이 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>페이지 자동 리다이렉트 테스트</title>

	<style type="text/css">

	::selection { background-color: #E13300; color: white; }
	::-moz-selection { background-color: #E13300; color: white; }

	body {
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}


	#body {
		margin: 0 15px 0 15px;
	}

	#container {
		margin: 10px;
		border: 1px solid #D0D0D0;
		box-shadow: 0 0 8px #D0D0D0;
	}
	</style>
</head>
<body>

<div id="container">
	<h1>Redirect Test</h1>

	<div id="body">
		<p>3초가 지나면 naver 사이트가 열립니다.</p>
	</div>
</div>

<script> 
    // 시간 변수, setTimeout() 함수는 ms(밀리 초 = 1/1000 초)를 사용함
    // ex) 3000ms = 3000 * 1/1000 = 3초
	var time = 3000;

	setTimeout(function(){
        // ms시간 후에 진행 될 코드 작성 
		alert('3초지남');
		location.href='https://www.naver.com';
		}, time);
 
</script>
</body>
</html>

 

저작자표시 비영리 변경금지

'Programming > Javascript' 카테고리의 다른 글

버튼 중복 클릭 방지하기  (0) 2022.02.23

 submit이나 button에 동작이 걸려있는 경우, 여러번 클릭했다가 동작이 여러번 처리되는 경우가 종종 발생합니다.

간단하게 버튼이 한 번만 눌릴 수 있게 하는 방법을 소개하겠습니다.

<!DOCTYPE>
<HTML>
    <HEAD>
        <TITLE> 중복클릭방지! </TITLE>
        <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
    </HEAD>

    <BODY>
        <form name="form">
            <input type="submit" id="button1" value="등록" onclick="OnlyOneClick();">
        </form>
    </BODY>


    <script>

        var once = true; // 최초 1회

        function OnlyOneClick() {
            if (once) {
                once = false; // 1회 들어오고 그 다음은 막는다.
                return true; // 최초 1회 return 은 true
            } else {
                return false; // 2회 부터 false
            }
        }
        
        var id = document.getElementById('button1');

        id.addEventListener('click', function () {
            var ooc = OnlyOneClick();  // 1회에는 true 를 return 받고 그 다음은 false
            if (ooc) {
                console.log('입장');
    
            } else {
                //alert("이미 등록 되었습니다.")
                console.log('입장불가')
                document.getElementById('button1').disabled = true;
            }
        })
    </script>
</HTML>

 자바스크립트에서 'button1' 이라는 id를 가진 버튼이 한 번만 눌리더라도 바로 비활성화되게 처리하였습니다.

 

(ps. 오래 전에 어느 블로그에서 참고하여 회사 사이트에 적용한 로직인데 블로그를 찾지 못하였읍니다 ㅜㅜ) 

저작자표시 비영리 변경금지

'Programming > Javascript' 카테고리의 다른 글

setTimeout 함수와 페이지 자동 이동  (0) 2022.02.23

+ Recent posts

티스토리툴바