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

How to disable a click event handler for particular time?

本文关键字：单击 事件处理 程序 定时间      更新时间：2023-09-26

只支持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做到这一点?

与其禁用click事件，不如检查变量是否正在运行。

var funcRunning = false;
function func(){
  if (funcRunning) return;
  funcRunning = true;
  //Function logic here
  funcRunning = false;
  return //whatever  
}

这样你就不会猜测函数将花费5秒来运行，函数将不会执行它的逻辑，直到它完成当前的运行。

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

function func(){
  if (func.IsRunning) return;
  func.IsRunning = true;
  //Function logic here
  func.IsRunning = false;
  return //whatever  
}

详细说明我对Curts回答的看法:

声明函数function时，可以做两件事:

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

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

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

如果你的函数是异步的(它发送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;
       }
    }
  };
}

注:当前的例子不是最正确的创建XmlHttpRequest实例(不是跨浏览器)。

相关文章：