How to disable a click event handler for particular time?

Question

Only JavaScript, No jquery.

Code goes like:

window.onload = addListeners;
function addListeners(){
    for(var  i = 0 ; i < document.getElementsByClassName('arrow').length; i++){
    if(window.addEventListener){
        document.getElementsByClassName('arrow') [i].addEventListener( 'click', func , false);

    }else{
        document.getElementById('arrow') [i].attachEvent('onclick' , func);
    }
}
}


function func(){
//Takes exactly 5 seconds to execute
}

Now, I want to disable the 'click' for 5 seconds when the function 'func()' is running. And, then after the 'func()' is completely executed, the click should again be enabled automatically.

How to do this only using JavaScript?

Answer 1

Rather than disable the click event, check a variable to see if its currently running.

var funcRunning = false;
function func(){
  if (funcRunning) return;
  funcRunning = true;

  //Function logic here

  funcRunning = false;
  return //whatever  
}

This way your not guessing the function will take 5 seconds to run, the function will simply not execute its logic until its completed its current run.

EDIT: As @NULL has suggested, a better method would be to store the boolean variable on the function itself to prevent global pollution:

function func(){
  if (func.IsRunning) return;
  func.IsRunning = true;

  //Function logic here

  func.IsRunning = false;
  return //whatever  
}

Answer 2

To elaborate my comments on Curts answer:

When declaring the function func you can do two things:

function func() {
    if ( !func.isRunning ) {
        func.isRunning = true;
        /* logic goes here */
        func.isRunning = false;
    }
}

Or you can make a closure and store isRunning inside it:

var func = (function() {
    var isRunning = false;
    return function() {
        if ( !isRunning ) {
            isRunning = true;
            /* logic goes here */
            isRunning = false;
        }
    };
})();

The second example can makes a private variable only accessible inside the closure.

---

Its mostly about a design pattern some developers doesn't like to store variables directly on functions like in example one. The only difference is that if someone chooses to set func.isRunning = true the function cannot run again and therefore not reset itself.