5

只有 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 做到这一点？

4

3 回答 3

5

与其禁用单击事件，不如检查一个变量以查看其当前是否正在运行。

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  
}
于 2013-06-03T12:38:37.563 回答
4

详细说明我对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该功能将无法再次运行，因此不会自行重置。

于 2013-06-03T13:07:35.080 回答
1

如果您的函数是异步的（据我所知，它发送 ajax 请求），您最好为该请求创建一个“成功”回调并在那里处理 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 实例（不是跨浏览器）时不是最正确的。它仅作为示例显示。

于 2013-06-03T12:49:15.427 回答