JavaScript Once Function
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!
go on, follow up with debounce and throttle.
Great thought, beginner! Here you go: http://davidwalsh.name/javascript-debounce-function
Available on npm as https://github.com/isaacs/once
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); // nothingYour 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?
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.
Thanks for this!
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!
Perfect, thanks
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.
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; }; }Thanks for this. I’m not very good at JavaScript, so sorry if my question is dumb.
Where’s
argumentsdefined?And is
contextdefined to allow the function to be applied on an object as well as being capable of calling it globally?argumentsis a local variable available within all functions (more on this one is here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments).contextis there to specify context in which function is being executed (thisinside of your function will refer tocontext).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.
Very nice and elegant approach. I use this function in my projects and it’s working well.
Thanks!
Nice solution. I’d be inclined to change
to
There’s no reason for the returned function to hang on to a reference to <pre class=”javascript”>context</pre> once <pre class=”javascript”>fn</pre> has been called.