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!

Cloudinary

Recent Features

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...

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!