Ending an Event Driven Function in JavaScript

Question

I am using JavaScript with HTML5. When the user clicks on a button, an event-driven JavaScript function starts up. When the user clicks on the button again, another instance of this function starts up. So I have two instances of the same function handling a event. However I only want the new instance to be running. How do I end the first instance of the?

An example is a function with the following code

Canvas.paper = Raphael(xOffset,yOffset,imageWidth,imageHeight);
masterBackground = Canvas.paper.rect(0,0,imageWidth,imageHeight);

window.onkeydown=function(e){
    // Event handler code
}

document.addEventListener('keydown', function(event) {
    // Event handler code
}

masterBackground.mousemove(function(e){
    // Event handler code
}

Do you happen to have some code to show as an example? For instance, what are these functions doing? Are they using setInterval, making ajax call, etc...? — Chase
– Chase, Commented Apr 12, 2013 at 16:48
Use a flag that indicates it's already running so as to prevent others from starting. — user1106925
– user1106925, Commented Apr 12, 2013 at 16:48

user1106925 · Accepted Answer · 2013-04-12 16:54:36Z

1

Seems apparent that something asynchronous and long-running is happening.

To prevent concurrent instances from running, just use a flag that is set when one starts so that others can't begin. Then when the current one finishes, reset the flag so that another can start.

 // Immediately invoked function, makes a variable and returns the handler
 //    that uses the variable as a flag.
button.onclick = (function() {

    // local variable, only accessible to the returned handler
    var running = false;

    // This is your event handler.
    return function(e) {
        if (running === false) {
            running = true;

            // run your asynchronous operation

            // after it's complete,  set `running = false;`
        }
    };
})();

answered Apr 12, 2013 at 16:54

community wiki

user1106925

Sign up to request clarification or add additional context in comments.

1 Comment

OtagoHarbour Over a year ago

Sorry about the slow reply. I ended up with something along the lines of what you describe. I initialized running to false as a global and then had code like "if (running){/* whatever*/}else{running=true;/* whatever*/}". So subsequent calls to the function went to the "running==true" block. Thanks, Peter.

Community · Accepted Answer · 2017-05-23 12:18:54Z

There are several solutions to this, some of them library dependent, but "nicer" to look at:

For example, using jQuery:

<button>Click me</button>

<script>
  $('button').on('click', handleButtonClick);

  function handleButtonClick() {
    $(this).off('click', handleButtonClick); //disable click event
    //do various things you don't want duplicated
    $(this).on('click', handleButtonClick); //reattach handler
  }
</script>

OR:

<button>Click me</button>

<script>
  $('button').once('click', handleButtonClick); //attach one-time handler

  function handleButtonClick() {
    //do various things you don't want duplicated
    $(this).once('click', handleButtonClick); //attach one-time handler
  }
</script>

Most libraries support similar methods, if you'd rather do it vanilla JS, that is definitely possible of course as well. "am not i am" provided a nice example for that: https://stackoverflow.com/a/15976888/622129

user2059983 · Accepted Answer · 2013-04-12 16:56:04Z

1

var buttonView = document.getElementById('buttonView');

buttonView.handleEvent = function(event) {
    window.alert(this.id);
    //this.onclick = null;
};

buttonView.onclick = buttonView.handleEvent;

Try it out: http://jsfiddle.net/KHQ4y/

Edit: I posted this before you supplied your specific code, but you get the idea.

answered Apr 12, 2013 at 16:56

user2059983

Comments

user2264587 · Accepted Answer · 2013-04-12 17:02:26Z

1

If you want to make sure a function only runs once:

example based on benny's example

function onlyOnce(proc){
    return function () {
        var result = proc.apply(this,arguments);
        proc = function () {};
        return result;
    }
}

answered Apr 12, 2013 at 17:02

user2264587

4742 silver badges6 bronze badges

Collectives™ on Stack Overflow

Ending an Event Driven Function in JavaScript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related