JS – FP vol. 2

Piszemy funkcję, która pozwala wywołać inną funkcję tylko raz. Do dzieła.

Nasz HTML:

<button id="btnOnce">Click me once</button>
<script src="./once.js"></script>

Funkcja once używająca closure:

const once = fn => {
    let called = false;
    return function(...args) {
      if (called) return;
      called = true;
      return fn.apply(this, args);
    };
  };

Przykład użycia:

 function clickMe(event){
    console.log(this, event); //button, clickEvent
  }

  window.addEventListener("DOMContentLoaded", function(){
    let btnOnce = document.getElementById('btnOnce');
    btnOnce.addEventListener('click', once(clickMe));
  });

Zwróćmy uwagę, jak można tę funkcję zepsuć:

const once = fn => {
    let called = false;
    return function(...args) {
      if (called) return;
      called = true;
      //return fn.apply(this, args);
      return fn(...args); 
    };
  };

  function clickMe(event){
    console.log(this, event); //window, clickEvent
  }

Dzięki apply this wskazuje na przycisk.