JavaScript 에서 중복 실행을 방지하는 방법

웹을 이용하다보면 한번만 클릭하는데 나도 모르게 더블 클릭을 하게 되는 경우가 있다.

보통은 별일 없지만 가끔 시스템 에러를 유발하는 경우가 있다.

그래서 JavaScript에서 중복 실행을 방지하는 방법들에 대해 알아보자

---

1. 버튼 비활성화

버튼을 클릭한 후 즉시 버튼을 비활성화하여 더 이상 클릭 할 수 없게 만든다.

<button id="myButton" onclick="handleClick()">Click Me</button>

<script>
function handleClick() {
    // 버튼 비활성화
    document.getElementById('myButton').disabled = true;

    // 여기서 원하는 이벤트 처리를 진행합니다.
    console.log('Button clicked');

    // 이후 버튼을 다시 활성화해야 할 경우
    // setTimeout(() => {
    //     document.getElementById('myButton').disabled = false;
    // }, 3000); // 필요에 따라 타이머 설정
}
</script>

 

2. 플래그 사용

플래그를 사용하여 이벤트가 실행 중인 동안 두 번째 클릭을 무시하도록 하는 방법

<button id="myButton" onclick="handleClick()">Click Me</button>

<script>
let isProcessing = false;

function handleClick() {
    if (isProcessing) return; // 이미 처리 중인 경우 무시

    isProcessing = true; // 이벤트 처리 시작
    console.log('Button clicked');

    // 여기서 원하는 이벤트 처리를 진행합니다.

    // 처리 완료 후 플래그를 초기화
    // (예를 들어 비동기 작업이 완료된 후)
    setTimeout(() => {
        isProcessing = false;
    }, 3000); // 필요에 따라 타이머 설정
}
</script>

 

3. once 옵션 사용

once 옵션을 사용하여 이벤트가 한 번만 발생하도록 설정

<button id="myButton">Click Me</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked');
    // 여기서 원하는 이벤트 처리를 진행합니다.
}, { once: true }); // 이벤트가 한 번만 발생하도록 설정
</script>

 

4. 버튼의 disabled 속성 및 비동기 작업 처리

비동기 작업(AJAX) 동안 버튼을 비활성화한 후, 작업이 완료되면 버튼을 활성화 시킨다.

<button id="myButton" onclick="handleClick()">Click Me</button>

<script>
async function handleClick() {
    const button = document.getElementById('myButton');
    button.disabled = true; // 클릭 후 버튼 비활성화

    try {
        // 비동기 작업 예시 (예: AJAX 호출)
        await fakeAsyncOperation();

        console.log('Button clicked and operation completed');
    } catch (error) {
        console.error('Operation failed', error);
    } finally {
        button.disabled = false; // 작업 완료 후 버튼 다시 활성화
    }
}

// 비동기 작업 시뮬레이션 함수
function fakeAsyncOperation() {
    return new Promise(resolve => setTimeout(resolve, 2000)); // 2초 후에 완료
}
</script>

---

이렇듯 JavaScript로 화면에서 중복 실행을 방지할 수 있는 방법이 여러가지 있다.

JAVA가 아닌 화면단에서 컨트롤 해주기 때문에 시스템적인 부하도 줄일 수 있고,

이러한 디테일한 방법들이 전체적인 시스템 에러를 줄일 수 있다.

---