JavaScript - 한번만 실행되는 함수 (once: true)

Javascripthtml

addEventListener()로 버튼이 클릭될 때 호출되도록 등록한 함수가 한번만 호출하도록 만드는 방법을 소개합니다.

1. addEventListener()와 once를 이용한 방법

addEventListener()로 함수를 등록할 때 once: true를 함께 인자로 전달하면, 버튼을 여러번 클릭해도 함수는 한번만 호출됩니다.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

    <button id="myButton">클릭하세요!</button>

    <script>
        var buttonElement = document.getElementById("myButton");

        function myFunction() {
            console.log("이벤트 발생!");
        }

        buttonElement.addEventListener("click", myFunction, {once: true});
    </script>

</body>
</html>

위 코드를 실행하고, 버튼을 여러번 클릭했을 때 아래처럼 함수는 한번만 호출됩니다. ko cd9de768

화살표 함수를 사용하여 구현

아래와 같이 화살표 함수를 사용하여 간단히 구현할 수도 있습니다. 결과는 동일합니다.

<script>
  var buttonElement = document.getElementById("myButton");

  buttonElement.addEventListener("click",
              () => { console.log("이벤트 발생!"); },
              {once: true});
</script>

2. 직접 구현하는 방법

단순하게 함수가 한번 호출되었는지 상태를 저장하는 변수를 선언하고, 함수 내에서 조건을 체크하여 한번만 내부 코드가 수행되도록 만들 수 있습니다.

가능하면 once: true를 이용하여 구현하는 것이 좋아보입니다.

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
</head>
<body>

    <button id="myButton">클릭하세요!</button>

    <script>
    	var hasExecuted = false;
    	function myFunction() {
    		if (!hasExecuted) {
    			console.log("한 번만 실행되는 함수 실행!");
    			hasExecuted = true;
    		}
    	}
    	var buttonElement = document.getElementById("myButton");
    	buttonElement.addEventListener("click", myFunction);
    </script>

</body>
</html>
Loading script...

Related Posts

codechachaCopyright ©2019 codechacha