JavaScript Once Function

By  on  

Every so often you have a function which you only want to run once.  Oftentimes these functions are in the form of event listeners which may be difficult to manage.  Of course if they were easy to manage, you'd just remove the listeners but that's a perfect world and sometimes you simply want the ability to only allow a function to be called once.  Here's the JavaScript function to make that possible!

The JavaScript

Think of this once function as a wrapper for the function you provide:

function once(fn, context) { 
	var result;

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

		return result;
	};
}

// Usage
var canOnlyFireOnce = once(function() {
	console.log('Fired!');
});

canOnlyFireOnce(); // "Fired!"
canOnlyFireOnce(); // nada

The wrapping function is fired only once because a tracker variable is used to ensure the function is only executed once.  Many JavaScript toolkits offer this as a feature but the code to accomplish this feat is so small that it's good to have available in the case that you can dodge a JavaScript toolkit!

Recent Features

Incredible Demos

Discussion

  1. phiggins

    go on, follow up with debounce and throttle.

  2. Tim Oxley

    Available on npm as https://github.com/isaacs/once

  3. hjess

    I usually do this, more directly, instead:

    function toBeRunOnce(args)  {
      // some stuff to do
      console.log('toBeRunOnce has completed');
      toBeRunOnce = function() {};
    }
    
    
    toBeRunOnce(blahBlah);  // "... has completed"
    toBeRunOnce(haHa);       // nothing
    

    Your solution is better for cases where you have a function that you might want run once in some contexts, but run multiple times in some other context. But do you ever really encounter that?

  4. Thanks for this!

  5. Allain

    Second source bit can be rewritten as the below for brevity:

    function once(fn, context) { 
      var result;
       
      return function() { 
        if (fn) {
          result = fn.apply(context || this, arguments);		   
          fn = null;	
        }
          
        return result;
      };
    }
    
    • Great point, I’ve updated my post! Thank you!

  6. I’m learning js 8 months already, but i’m still struggling with call/apply. Everytime when i’m reading docs, it feels like someone is fucking my brain.

  7. Alex Marinenko

    You can go even further and do as following:

    Function.prototype.once = function (ctx) {
      var fn = this;
      var aArgs = Array.prototype.slice.call(arguments, 1);
        
      return function () {
        var result;
        if (fn) {
          result = fn.apply(ctx || this, aArgs);
          fn = null;
        }
        return result;
      };
    }
    
  8. Thanks for this. I’m not very good at JavaScript, so sorry if my question is dumb.

    Where’s arguments defined?

    And is context defined to allow the function to be applied on an object as well as being capable of calling it globally?

  9. Guest

    Can someone explain why you might want to have a function like this. I was asked this question on an interview and didn’t know what it was or how you might use it. Also, does this pattern have a name?

    • For anything you don’t want to be able to be executed more than once? Mostly for initialization stuff.

  10. Alin Stefan

    Very nice and elegant approach. I use this function in my projects and it’s working well.
    Thanks!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!