CODEWITHSUNDEEP
javascriptonclick
Navneet Saini
Navneet Saini

Reputation: 944

How to disable a click event handler for particular time?

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?

Upvotes: 5

Views: 429

Answers (3)

Andreas Louv
Andreas Louv

Reputation: 47099

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.

Upvotes: 4

Curtis
Curtis

Reputation: 103338

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  
}

Upvotes: 5

Just_Mad
Just_Mad

Reputation: 4077

If your function is asynchronous (it sends ajax request, as far as I understood), you'd better create a "success" callback for that request and handle funcRunning flag there.

Here is an example:

var funcRunning = false;
function func() {
  if (funcRunning) {
    return;
  }
  funcRunning = true;
  var xmlhttp = new XmlHttpRequest();
  xmlhttp.open('GET', '/xhr/test.html', true);
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
       if (xmlhttp.status == 200) {
         // do something.
         funcRunning = false;
       }
    }
  };
}

P.S. Current example is not the most correct in creating XmlHttpRequest instance (not crossbrowser). It is shown only as an example.

Upvotes: 1

Related Questions