[JavaScript] Exécuter une fonction seulement une fois

Mise à jour: 09/12/2021

Un autre moyen suggéré dans le chapitre 15 Handling Events du livre Eloquent Javascript.

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

<button>Act-once button</button>

let button = document.querySelector("button");

function once() {

console.log("Done.");

button.removeEventListener("click", once);

}

button.addEventListener("click", once);

</script>

js/utils.js:

const executeOnlyOnce = ( function( callbackFunction ) {
    let alreadyExecuted = false;
    return function( callbackFunction ) {
        if ( !alreadyExecuted ) {
            alreadyExecuted = true;

            // Execute only once!
            callbackFunction();
        }
    };
})();

export { executeOnlyOnce }

const executeOnlyOnce = ( function( callbackFunction ) {

let alreadyExecuted = false;

return function( callbackFunction ) {

if ( !alreadyExecuted ) {

alreadyExecuted = true;

// Execute only once!

callbackFunction();

}

};

})();

export { executeOnlyOnce }

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;
console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){
    hadPreviousBreakpointChanges = true;
};

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;

console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){

hadPreviousBreakpointChanges = true;

};

executeOnlyOnce(onBreakpointChange);
console.log(hadPreviousBreakpointChanges); // "true"

1 2	executeOnlyOnce(onBreakpointChange); console.log(hadPreviousBreakpointChanges); // "true"

Articles récents

Catégories

Archives

Méta

[JavaScript] Exécuter une fonction seulement une fois