21

I'm wondering is it possible for force a javascript event listener to, without the condition being true force it to execute once then continue listening for it's condition to be met to execute further?

Skizit
  • 43,506
  • 91
  • 209
  • 269
  • 1
    "without the condition being true"... what condition? Also, if it will fire once, then continue to listen, then presumably fire again, then... it's not firing once. Unless you mean you want to only ever process 1 event at a time (not multiple simultaneous events)? – KOGI Feb 02 '11 at 19:17
  • Are you using a javascript framework? I think in ExtJS it's possible. In jQuery maybe too. – Marc Feb 02 '11 at 19:17
  • jQuery has a .one( ) method, but I'm not sure if it's quite what you're looking for. Although, you could just re-bind the event in the handler. This would have the effect of not handling simultaneous events, then after the handler is complete, start listening for the event again. http://api.jquery.com/one/ – KOGI Feb 02 '11 at 19:19
  • 1
    Possible duplicate of [Only fire an event once?](http://stackoverflow.com/questions/3393686/only-fire-an-event-once) – rofrol Dec 17 '15 at 01:55
  • Possible duplicate of [How to trigger event in JavaScript?](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) – ivan_pozdeev Dec 17 '15 at 04:21
  • I think you want to run a event listener once, without the event or with the event but ignoring some custom condition once. They are different questions, and judging from the response, your question is pretty unclear. Try to phase it better and think what information we'll need to help you. – Sheepy Dec 17 '15 at 04:23

3 Answers3

61
var clickFunction = function (event) {
    //do some stuff here
    window.removeEventListener('click',clickFunction, false );

};
window.addEventListener("click", clickFunction, false);

This will let you fire the clickFunction once, as the magic of closure let the removeEventListener find the clickFunction.

No need to use a library just to get something simple done.

Jlam
  • 1,932
  • 1
  • 21
  • 26
  • 3
    This quickly becomes a problem if you need to use this pattern more than twice in one code. This is very common in css animation contexts where you have an animation "hook transitionend, set change, make transitionend remove itself", and often you have to chain it. A pattern similar to http://hastebin.com/ikixonajuk.coffee is far more maintainable. In NodeJS it is just called "once". – Dmytro Aug 22 '16 at 02:44
  • 1. in 2011 when the answer was originally posted, once wasn't available. 2. that's a client side implementation question in the original question so nodejs isn't helpful 3. your coffee script is essentially the same idea with slight modification. – Jlam Aug 23 '16 at 07:46
  • 1
    is once available now in browser through or do we still have to invent it/use bloated third party libraries for it? – Dmytro Aug 23 '16 at 07:49
  • implementing your own once function is only a couple lines. Something like this would work. window.once = function(aFun) { var clickFunction = function (event) { aFun(); window.removeEventListener('click',clickFunction, false ); }; window.addEventListener("click", clickFunction, false); } window.once(function() { .... }) – Jlam Aug 23 '16 at 07:54
  • I am aware, I posted this earlier for reference which works for any event http://hastebin.com/ikixonajuk.coffee. The difference between it "just being there" and having to invent it is fairly large when it comes to how clean code is. It's just at this point I find most events I deal with are "run once". Even 'load' may as well be removed after it's called, so it's surprising there isn't a builtin for it. A native implementation of it would probably be more efficient as well. – Dmytro Aug 23 '16 at 08:00
0

if you wrap the code in a function, just call the function on page load

edited to add example:

dunno what your event is but here's an example:

<a ..onclick='someFunction()'>click</a>

<script type='text/javascript'>
function someFunction() {
  // do whatever
}

// call the function
someFunction();
</script>
CrayonViolent
  • 32,111
  • 5
  • 56
  • 79
  • if you need the function to be in a particular context, you can use jQuery's proxy( ) method http://api.jquery.com/jQuery.proxy/ – KOGI Feb 02 '11 at 19:29
0

If I understand your question correctly, you only want to handle one event at a time (if an event fires multiple times in rapid succession, you only want to handle one of them) then once the handler is complete, you will continue to listen for more events. Correct?

jQuery has a .one( ) method api.jquery.com/one

It only handles the event once, but if you re-bind the event in the handler, then it will function as you want.

function handler( )
{
    // do stuff

    $(this).one( 'click', handler );
}

$('.someElement').one( 'click', handler );
KOGI
  • 3,959
  • 2
  • 24
  • 36