Javascript 防止函数同时被多个事件调用

在我的示例中，dosomething将运行两次。我希望每次交互只运行一次

我正在使用焦点，这样用户就可以在元素中添加选项卡来触发事件，或者单击它来触发事件

---

如果用户多次与该事件交互，则可以多次触发该事件（依次为打开、关闭和打开）.

创建一个名为

done

的变量，并在函数触发时将其设置为

false

，如果

done

为

false

，则只在函数末尾将

done

更改为

true

，这样如果再次触发函数get，则不会执行“Do Something”，因为“done”为设置为

true

element.on('click focus', function (e) {
    // Do Something
}

---

创建一个名为

done

的变量，当函数被触发时，将其设置为

false

，只有当

done

为

false

时才触发“做点什么”，并在函数末尾将

done

更改为

true

，这样如果函数再次触发，则不会执行“做点什么”，因为“done”被设置为

true

element.on('click focus', function (e) {
    // Do Something
}

---

我认为这种行为是错误的，但根据您的描述，这里有一个处理您为菜单详述的事件的总体思路。在此进行工作演示：

HTML:

---

我认为这种行为是错误的，但根据您的描述，这里有一个处理您为菜单详述的事件的总体思路。在此进行工作演示：

HTML:

---

您可以使用自己的方法来处理多个事件，使用一个轻微的超时来限制事件，以便只触发一个事件，等等

$(document).ready(function(){
    $("#menu").slideUp("fast");
    var closed = true;

    $("#btn").click(function(){                       
          menuToggle(closed);
          closed = !closed;
    });

    $("#btn").focus(function(){
         menuToggle(closed);
         closed = !closed;
    });

    $("#btn").focusout(function(){
         menuToggle(closed);
         closed = !closed;
    });
});

function menuToggle(clsd){
    if(clsd){ 
        $("#menu").slideDown();          
    } else {
        $("#menu").slideUp();          
    }
}

$.fn.onMulti=function（）{
var temp=[].slice.call（参数），fn=temp.pop（）；
在（…temp，function（）上返回此.on{
clearTimeout（$（this.data（'multiTimer'））；
$（this.data（'multimer'，setTimeout（fn.bind（this，arguments），200））
});
}
/*像*/
var元素=$（'a'），i=0；
element.onMulti（'click focus'，函数（e）{
log（'works:'+（++i））；
});







元素来删除焦点
您可以使用自己的方法来处理多个事件，使用稍微超时来限制事件，以便只触发一个事件，等等

$(document).ready(function(){
    $("#menu").slideUp("fast");
    var closed = true;

    $("#btn").click(function(){                       
          menuToggle(closed);
          closed = !closed;
    });

    $("#btn").focus(function(){
         menuToggle(closed);
         closed = !closed;
    });

    $("#btn").focusout(function(){
         menuToggle(closed);
         closed = !closed;
    });
});

function menuToggle(clsd){
    if(clsd){ 
        $("#menu").slideDown();          
    } else {
        $("#menu").slideUp();          
    }
}


$.fn.onMulti=function（）{
var temp=[].slice.call（参数），fn=temp.pop（）；
在（…temp，function（）上返回此.on{
clearTimeout（$（this.data（'multiTimer'））；
$（this.data（'multimer'，setTimeout（fn.bind（this，arguments），200））
});
}
/*像*/
var元素=$（'a'），i=0；
element.onMulti（'click focus'，函数（e）{
log（'works:'+（++i））；
});







元素来删除焦点
我建议在这里使用不同的策略。与其处理全局变量之类的问题，不如跟踪菜单的状态，必要时进行切换


$（函数（）{
功能菜单（元素）{
this.isOpen=false；
this.element=元素；
$（this.element）.on（'focusin'，this.open.bind（this））；
$（this.element）.on（'focusout'，this.close.bind（this））；
$（this.element）.on（'click'，this.open.bind（this））；
}
Menu.prototype.open=函数（）{
this.isOpen=真；
这个.update（）；
}
Menu.prototype.close=函数（）{
this.isOpen=false；
这个.update（）；
}
Menu.prototype.update=函数（）{
$（this.element）.toggleClass（'open'，this.isOpen）；
}
$（'.item'）。每个（函数（ix，el）{新菜单（el）；}）；
});
.item.子菜单{
显示：无；
}
.item.open.子菜单{
显示：块；
}




子菜单
子菜单




子菜单
子菜单


我建议采用不同的策略。与其处理全局变量之类的问题，不如跟踪菜单的状态，必要时进行切换


$（函数（）{
功能菜单（元素）{
this.isOpen=false；
this.element=元素；
$（this.element）.on（'focusin'，this.open.bind（this））；
$（this.element）.on（'focusout'，this.close.bind（this））；
$（this.element）.on（'click'，this.open.bind（this））；
}
Menu.prototype.open=函数（）{
this.isOpen=真；
这个.update（）；
}
Menu.prototype.close=函数（）{
this.isOpen=false；
这个.update（）；
}
Menu.prototype.update=函数（）{
$（this.element）.toggleClass（'open'，this.isOpen）；
}
$（'.item'）。每个（函数（ix，el）{新菜单（el）；}）；
});
.item.子菜单{
显示：无；
}
.item.open.子菜单{
显示：块；
}




子菜单
子菜单




子菜单
子菜单


您可以简单地声明一个全局布尔变量并将其设置为false。调用函数时，检查此变量；如果这是真实的回报；否则，将其设置为true并在函数中继续，在函数的最后一行再次设置为false。您确定这是您想要的吗？要单击的任何项目必须首先具有焦点。你可能只需要关注这里就可以了。所以没有内置的javascripty东西可以阻止这种情况发生吗？肯定的，这就是我想要的。一个简单的解释是，它是一个菜单，在点击或打开时打开，在关闭或再次点击时关闭。如果您想跟踪某个项目何时失去焦点，我建议查看或
模糊事件，如果您想跟踪某个项何时接收焦点，则可以简单地声明一个全局布尔变量并将其设置为false。调用函数时，检查此变量；如果这是真实的回报；否则，使其为真并在函数中继续，在函数的最后一行中使其为真
$.fn.onMulti = function() {
  var temp = [].slice.call(arguments), fn = temp.pop();

  return this.on(...temp, function() {
    clearTimeout($(this).data('multiTimer'));
    $(this).data('multiTimer', setTimeout(fn.bind(this, arguments), 200))
  });
}