한번만 실행하는 함수 (once:true X)

회사에서 일을 하는데 함수가 한번만 호출이 되게끔 해야하는 기능을 구현했어야 했는데, 간단하게 이벤트리스너에서 세 번째 매개변수에 option객체를 이용해서 잘 해결될 줄 알았지만 그게 아니었다.

const btn = document.getElementById('btn');

방법1

function once(fn, context) {
  var result;
  return function () {
    if (fn) {
      result = fn.apply(context || this, arguments);
      fn = null;
    }
    return result;
  };
}

var canOnlyFireOnce = once( () => {
  //something
})

btn.addEventListener('click', () => {
  canOnlyFireOnce();
})

구글링을 해서 겨우 찾은 코드이다.. 코드가 잘 이해가 안가지만 사용하기에 너무 적합해서 사용했었다. 함수형 프로그래밍은 정말 어려운 것 같습니다.

방법2

btn.addEventListener('click', () => {
  //something
}, {once:true})

addEventListener( type, listener, options )
// 이벤트 유형 // 콜백함수 자리 // 이벤트 특징

세 번째 매개변수 중에서 once라는 메서드를 통해서 구현할 수 있습니다.
이 방법이 거의 대부분 아는 방법이지 않을까 싶습니다.



하지만 이렇다고 가정해보자..
이벤트리스너 안에 호출되는 함수가 몇 가지가 있는데,
한가지만 호출되게 하려면 once메서드로는 불가능하다.

ex)

btn.addEventListener('click', () => {
  myFunction1() // 이 함수만 한 번만 호출되길 원함.
  myFunction2()  

}, {once:true})

이렇게 되면 myFunction1,myFunction2 두개의 함수가 한번만 실행하게 됩니다. 그렇기 때문에 방법1과 같은 코드를 사용했습니다.