如何在特定时间禁用单击事件处理程序？

Question

只有JavaScript，没有jquery。

代码如下：

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
}

现在，我想在函数'func（）'运行时禁用'click'5秒。 然后，在'func（）'完全执行后，再次自动启用点击。

如何只使用JavaScript？

Answer 1

而不是禁用click事件，检查变量以查看它当前是否正在运行。

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

  //Function logic here

  funcRunning = false;
  return //whatever  
}

这样你不会猜测函数需要5秒才能运行，该函数在完成当前运行之前不会执行其逻辑。

编辑：正如@NULL建议的那样，更好的方法是将布尔变量存储在函数本身以防止全局污染：

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

  //Function logic here

  func.IsRunning = false;
  return //whatever  
}

Answer 2

详细说明我对Curts的评论答案 ：

声明函数func时，你可以做两件事：

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

或者您可以在其中创建一个闭包并存储isRunning：

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

第二个示例可以使私有变量只能在闭包内访问。

---

它主要是关于一种设计模式，一些开发人员不喜欢将变量直接存储在像例子中的函数上。 唯一的区别是，如果有人选择设置func.isRunning = true该函数无法再次运行，因此不会自行重置。

Answer 3

如果你的函数是异步的（它发送了一个jjax请求，据我所知），你最好为该请求创建一个“成功”回调并在那里处理funcRunning标志。

这是一个例子：

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;
       }
    }
  };
}

PS当前示例在创建XmlHttpRequest实例（不是crossbrowser）时不是最正确的。 它仅作为示例显示。