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

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • 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...

Incredible Demos

  • By
    Send Email Notifications for Broken Images Using MooTools AJAX

    One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible.

  • By
    Highlighter: A MooTools Search & Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class 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?

    • teoman

      His solution is a utility function which can be adapted for all upcoming methods without forgetting to assign owner function to a null value.

      Also, yes there are many scenarios where a method can be used once in some cases and more in some others. Assume you have a product with trial and pro. You can only send single message for trial users, but many for pro users. So you can easily use same function for both purposes. Obviously you will need to validate trial vs pro member at server side, but at least at client, it is fair enough.

      Also there are many usage scenarios for games as well.

  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!