CODEWITHSUNDEEP
javascriptfunctiondesign-patterns
vlio20
vlio20

Reputation: 9295

Function in JavaScript that can be called only once

I need to create a function which can be executed only once, in each time after the first it won't be executed. I know from C++ and Java about static variables that can do the work but I would like to know if there is a more elegant way to do this?

Upvotes: 166

Views: 385060

Answers (30)

Apurv
Apurv

Reputation: 113

    function once(func, context){
      let ran;
    
      return function (){
        if(func){
          ran= func.apply(context || this.arguments);
          func=null;
        }
        return ran;
      }
    }
    
    const hello = once(()=>console.log("Hello"))
    
    hello(); //output - Hello
    hello(); //null
    hello(); //null

Using a closure return function and if the function calls again then returns null

Upvotes: 0

Bunyk
Bunyk

Reputation: 8067

Talking about static variables, this is a little bit like closure variant:

var once = function() {
    if(once.done) return;

    console.log('Doing this once!');

    once.done = true;
};

once(); // Logs "Doing this once!"
once(); // Logs nothing

You could then reset a function if you wish:

once.done = false;
once(); // Logs "Doing this once!" again

Upvotes: 14

Mina
Mina

Reputation: 17109

FOR EVENT HANDLER

If the function is a callback for an event listener, there is already a built-in option in the addEventListner method for just executing the callback once.

It can accept 3 parameters

  • Type
  • callback
  • options

options is an object that has a property called once

ex:

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

const callbackFunc = () => {
  alert('run')
}

button.addEventListener('click', callbackFunc, { once: true }) 
<button id="button">Click Once</button>

Upvotes: 1

sfscs
sfscs

Reputation: 525

I find it useful to just have a simple function that just returns true once, so you can keep the side effects higher up.

let once = () => !! (once = () => false);

once() // true
once() // false

Use like this:

if (once()) {
  sideEffect()
}

This exploits the fact that you can coerce an assignment expression to return true while changing the same function into a function that returns false.

If you must have it execute a function, it can be adapted using a ternary:

let once = (x) => !! (once = () => false) ? x() : false;

Now it accepts a single function as an argument. Fun fact, the second false is never reached.

Upvotes: 0

Shashwat SIngh
Shashwat SIngh

Reputation: 1

function x()
{
  let a=0;
  return function check()
   {
    if(!a++) 
     {
       console.log("This Function will execute Once.")
       return;
      }
     console.log("You Can't Execute it For the Second Time.")
     return;
    }
  }

 z=x()
 z() //Op - This Function will execute once
 z() //OP - You can't Execute it for the second time.

Upvotes: 0

djsd123
djsd123

Reputation: 413

I'm using typescript with node and it was @I Hate Lazy's answer that inspired me. I just assigned my function to a noop function.

let printName = (name: string) => {
    console.log(name)
    printName = () => {}
}

printName('Sophia') // Sophia
printName('Nico')   // Nothing Happens

https://jsbin.com/yuzicek/edit?js,console

Upvotes: 3

NIsham Mahsin
NIsham Mahsin

Reputation: 728

function once (fn1) {
  var ran = false
  var memo = null
  var fn = function(...args) {
    if(ran) {return memo}
    ran = true
    memo = fn1.apply(null, args)
    return memo
  }
  return fn
}

Upvotes: 1

Minas-Theodoros Charakopoulos
Minas-Theodoros Charakopoulos

Reputation: 76

You can use IIFE. IIFE means Immediately Invoked Function Expression and the result is to call a function only once by the time is created. Your code will be like this:

(function () {
  //The code you want to execute only one time etc...
  console.log("Hello world");
})()

Additionally, this way the data in the function remains encapsulated.
Of course and you can return values from the function and stored them into a new variable, by doing:

const/let value = (function () {
  //The code you want to execute only one time etc...
  const x = 10;
  return x;
})()

Upvotes: 0

Omar Saade
Omar Saade

Reputation: 591

// This is how function in JavaScript can be called only once    

let started = false;     
      if (!started) {
                    start() { // "do something" }
                }
                started = true;
            }

Upvotes: -1

Ted Hopp
Ted Hopp

Reputation: 234795

If by "won't be executed" you mean "will do nothing when called more than once", you can create a closure:

var something = (function() {
    var executed = false;
    return function() {
        if (!executed) {
            executed = true;
            // do something
        }
    };
})();

something(); // "do something" happens
something(); // nothing happens

In answer to a comment by @Vladloffe (now deleted): With a global variable, other code could reset the value of the "executed" flag (whatever name you pick for it). With a closure, other code has no way to do that, either accidentally or deliberately.

As other answers here point out, several libraries (such as Underscore and Ramda) have a little utility function (typically named once()[*]) that accepts a function as an argument and returns another function that calls the supplied function exactly once, regardless of how many times the returned function is called. The returned function also caches the value first returned by the supplied function and returns that on subsequent calls.

However, if you aren't using such a third-party library, but still want a utility function (rather than the nonce solution I offered above), it's easy enough to implement. The nicest version I've seen is this one posted by David Walsh:

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

I would be inclined to change fn = null; to fn = context = null;. There's no reason for the closure to maintain a reference to context once fn has been called.

Usage:

function something() { /* do something */ }
var one_something = once(something);

one_something(); // "do something" happens
one_something(); // nothing happens

[*] Be aware, though, that other libraries, such as this Drupal extension to jQuery, may have a function named once() that does something quite different.

Upvotes: 324

Sandeep Amarnath
Sandeep Amarnath

Reputation: 6917

A simple example for turning on light only once.

function turnOnLightOnce() {
  let lightOn = false;

  return function () {
    if (!lightOn) {
      console.log("Light is not on...Turning it on for first and last time");
      lightOn = true;
    }

  };
}

const lightOn = turnOnLightOnce();
lightOn()  // Light is not on...Turning it on for first and last time
lightOn()
lightOn()
lightOn()
lightOn()

https://codesandbox.io/s/javascript-forked-ojo0i?file=/index.js

This happens due to closure in JavaScript.

Upvotes: 1

Adam Jenkins
Adam Jenkins

Reputation: 55623

Tossing my hat in the ring for fun, added advantage of memoizing

const callOnce = (fn, i=0, memo) => () => i++ ? memo : (memo = fn());

// usage
const myExpensiveFunction = () => { return console.log('joe'),5; }
const memoed = callOnce(myExpensiveFunction);
memoed(); //logs "joe", returns 5
memoed(); // returns 5
memoed(); // returns 5
...

Upvotes: 0

Nikita
Nikita

Reputation: 1

JQuery allows to call the function only once using the method one():

let func = function() {
  console.log('Calling just once!');
}
  
let elem = $('#example');
  
elem.one('click', func);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>Function that can be called only once</p>
  <button id="example" >JQuery one()</button>
</div>

Implementation using JQuery method on():

let func = function(e) {
  console.log('Calling just once!');
  $(e.target).off(e.type, func)
}
  
let elem = $('#example');
  
elem.on('click', func);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>Function that can be called only once</p>
  <button id="example" >JQuery on()</button>
</div>

Implementation using native JS:

let func = function(e) {
  console.log('Calling just once!');
  e.target.removeEventListener(e.type, func);
}
  
let elem = document.getElementById('example');
  
elem.addEventListener('click', func);
<div>
  <p>Functions that can be called only once</p>
  <button id="example" >ECMAScript addEventListener</button>
</div>

Upvotes: 0

vsync
vsync

Reputation: 130155

Point to an empty function once it has been called:

function myFunc(){
     myFunc = function(){}; // kill it as soon as it was called
     console.log('call once and never again!'); // your stuff here
};
<button onClick=myFunc()>Call myFunc()</button>

Or, like so:

var myFunc = function func(){
     if( myFunc.fired ) return;
     myFunc.fired = true;
     console.log('called once and never again!'); // your stuff here
};

// even if referenced & "renamed"
((refToMyfunc)=>{
  setInterval(refToMyfunc, 1000);
})(myFunc)

Upvotes: 52

Sreeketh K
Sreeketh K

Reputation: 19

keep it as simple as possible

function sree(){
  console.log('hey');
  window.sree = _=>{};
}

You can see the result

script result

Upvotes: 0

pery mimon
pery mimon

Reputation: 8315

simple decorator that easy to write when you need 

function one(func) {
  return function () {
     func && func.apply(this, arguments);
     func = null;
  }
}

using:

var initializer= one( _ =>{
      console.log('initializing')
  })

initializer() // 'initializing'
initializer() // nop
initializer() // nop

Upvotes: 3

CMP
CMP

Reputation: 1210

If you want to be able to reuse the function in the future then this works well based on ed Hopp's code above (I realize that the original question didn't call for this extra feature!):

   var something = (function() {
   var executed = false;              
    return function(value) {
        // if an argument is not present then
        if(arguments.length == 0) {               
            if (!executed) {
            executed = true;
            //Do stuff here only once unless reset
            console.log("Hello World!");
            }
            else return;

        } else {
            // otherwise allow the function to fire again
            executed = value;
            return;
        }       
    }
})();

something();//Hello World!
something();
something();
console.log("Reset"); //Reset
something(false);
something();//Hello World!
something();
something();

The output look like:

Hello World!
Reset
Hello World!

Upvotes: 1

David
David

Reputation: 2748

If you're using Ramda, you can use the function "once".

A quote from the documentation:

once Function (a… → b) → (a… → b) PARAMETERS Added in v0.1.0

Accepts a function fn and returns a function that guards invocation of fn such that fn can only ever be called once, no matter how many times the returned function is invoked. The first value calculated is returned in subsequent invocations.

var addOneOnce = R.once(x => x + 1);
addOneOnce(10); //=> 11
addOneOnce(addOneOnce(50)); //=> 11

Upvotes: 0

Monday Fatigue
Monday Fatigue

Reputation: 321

Reusable invalidate function which works with setInterval:

var myFunc = function (){
  if (invalidate(arguments)) return;
  console.log('called once and never again!'); // your stuff here
};

const invalidate = function(a) {
  var fired = a.callee.fired;
  a.callee.fired = true;
  return fired;
}

setInterval(myFunc, 1000);

Try it on JSBin: https://jsbin.com/vicipar/edit?js,console

Variation of answer from Bunyk

Upvotes: 2

Gleb Dolzikov
Gleb Dolzikov

Reputation: 834

It helps to prevent sticky execution 

var done = false;

function doItOnce(func){
  if(!done){
    done = true;
    func()
  }
  setTimeout(function(){
    done = false;
  },1000)
}

Upvotes: -2

Elliot Gorokhovsky
Elliot Gorokhovsky

Reputation: 3762

This one is useful for preventing infinite loops (using jQuery):

<script>
var doIt = true;
if(doIt){
  // do stuff
  $('body').html(String($('body').html()).replace("var doIt = true;", 
                                                  "var doIt = false;"));
} 
</script>

If you're worried about namespace pollution, subsitute a long, random string for "doIt".

Upvotes: -2

atw
atw

Reputation: 5830

if (!window.doesThisOnce){
  function myFunction() {
    // do something
    window.doesThisOnce = true;
  };
};

Upvotes: 0

RegarBoy
RegarBoy

Reputation: 3521

var init = function() {
    console.log("logges only once");
    init = false;
}; 

if(init) { init(); }

/* next time executing init() will cause error because now init is 
   -equal to false, thus typing init will return false; */

Upvotes: 0

I Hate Lazy
I Hate Lazy

Reputation: 48761

Replace it with a reusable NOOP (no operation) function.

// this function does nothing
function noop() {};

function foo() {
    foo = noop; // swap the functions

    // do your thing
}

function bar() {
    bar = noop; // swap the functions

    // do your thing
}

Upvotes: 73

orcaman
orcaman

Reputation: 6551

If your using Node.js or writing JavaScript with browserify, consider the "once" npm module:

var once = require('once')

function load (file, cb) {
  cb = once(cb)
  loader.load('file')
  loader.once('load', cb)
  loader.once('error', cb)
}

Upvotes: 1

Andreas Louv
Andreas Louv

Reputation: 47099

Initial setup:

var once = function( once_fn ) {
    var ret, is_called;
    // return new function which is our control function 
    // to make sure once_fn is only called once:
    return function(arg1, arg2, arg3) {
        if ( is_called ) return ret;
        is_called = true;
        // return the result from once_fn and store to so we can return it multiply times:
        // you might wanna look at Function.prototype.apply:
        ret = once_fn(arg1, arg2, arg3);
        return ret;
    };
}

Upvotes: 1

Aldekein
Aldekein

Reputation: 3715

Here is an example JSFiddle - http://jsfiddle.net/6yL6t/

And the code:

function hashCode(str) {
    var hash = 0, i, chr, len;
    if (str.length == 0) return hash;
    for (i = 0, len = str.length; i < len; i++) {
        chr   = str.charCodeAt(i);
        hash  = ((hash << 5) - hash) + chr;
        hash |= 0; // Convert to 32bit integer
    }
    return hash;
}

var onceHashes = {};

function once(func) {
    var unique = hashCode(func.toString().match(/function[^{]+\{([\s\S]*)\}$/)[1]);

    if (!onceHashes[unique]) {
        onceHashes[unique] = true;
        func();
    }
}

You could do:

for (var i=0; i<10; i++) {
    once(function() {
        alert(i);
    });
}

And it will run only once :)

Upvotes: 1

Andrew Feng
Andrew Feng

Reputation: 1970

Trying to use underscore "once" function:

var initialize = _.once(createApplication);
initialize();
initialize();
// Application is only created once.

http://underscorejs.org/#once

Upvotes: 0

Jowen
Jowen

Reputation: 5383

From some dude named Crockford... :)

function once(func) {
    return function () {
        var f = func;
        func = null;
        return f.apply(
            this,
            arguments
        );
    };
}

Upvotes: 2

Shmiddty
Shmiddty

Reputation: 13967

You could simply have the function "remove itself"

​function Once(){
    console.log("run");

    Once = undefined;
}

Once();  // run
Once();  // Uncaught TypeError: undefined is not a function

But this may not be the best answer if you don't want to be swallowing errors.

You could also do this:

function Once(){
    console.log("run");

    Once = function(){};
}

Once(); // run
Once(); // nothing happens

I need it to work like smart pointer, if there no elements from type A it can be executed, if there is one or more A elements the function can't be executed.

function Conditional(){
    if (!<no elements from type A>) return;

    // do stuff
}

Upvotes: 6

Related Questions