所以，这就是事情。网站侧面有一个菜单栏。当您单击它时，菜单支架从侧面滚动（菜单打开），当您再次单击该栏时，菜单支架会回滚并隐藏菜单。到目前为止很简单。在tat栏上，有一个带有文本“MENU”的图标。当您打开菜单时，图标会更改，文本将更改为“关闭”。关闭菜单后，它将恢复正常。仍然没什么大不了的。
这就是它的样子：
opened menu（'ZATVORIŤ'字幕的意思是'关闭'并不担心这一点）
现在让我们开玩笑吧。我们需要一个效果，一个文本过渡来使它看起来很酷和流畅。因此，当菜单关闭时，没有标题。只有菜单图标。当用户将鼠标悬停在栏上时，文本将显示。一旦用户将鼠标悬停在栏上，“MENU”标题将逐字显示。这意味着，将出现的第一个字母是'M'，第二个'E'......'N'......'U'。整个标题将出现在几百毫秒，也许是半秒钟。当用户徘徊时，标题将由后者消失。所以'男'''我'......'M'......''。你明白了。 'CLOSE'标题的工作方式相同。当用户点击栏时（当然他需要首先将鼠标悬停在栏上，因此已经有'MENU'标题）'MENU'标题逐字消失，'CLOSE'标题将逐字母出现。当用户关闭菜单时，“关闭”标题会以同样的方式消失。非常好的事。
现在是整个问题的根源。一旦用户正常行动，这就行了。一旦用户继续徘徊和离开酒吧太快，它将在事件已经运行时触发事件（我最好猜测问题是什么）。如果他一直点击栏上也是如此 - “关闭”标题会变得混乱，而不是“菜单”标题。然后，而不是那些字幕的字母将出现“undefined”。所以标题看起来像'MEundefinedundefinedundefined ....'或'MMMMENundefinedundefined ...'或类似的东西。所以我最初的想法是，它是一个一个一个错误的错误，因为我将字母保存在字母数组中并且它显示为“未定义”，对吧？我快速修补它只是为了确保不会出现“未定义” - 如果用户试图制动它，事件就会退出触发。他可以在酒吧上空盘旋，什么都不会发生。当他打开菜单（并关闭它）时它会恢复正常。但这不是它应该如何工作，我需要解决它。
所以我需要做的（我认为）是确保事件不会触发，如果一个人已经在进行中（某种程度上）。我尝试了一些javascript函数，如delay（）或setTimeout（）...我试图从效果中创建函数 - 失败。我花了太多时间在这上面，而且我缺乏使其正常工作所需的想法和技能。是否有人能够为我检查代码并给出一些建议或修补它？
这里的代码：
HTML：
<div id="navigation_bar"> <!-- THE NAVIGATION BAR WITH ICON AND CAPTION HOLDER FOR THE TEXT -->
<img id="menu_icon" src="<?= $base_url ?>public/web/images/menu.png">
<p class="zatvorit">ZATVORIŤ</p>
<p class="menu">MENU</p>
<p class="caption_holder"><!-- HERE WILL THE MAGIC HAPPEN --></p>
</div>
<div id="navigation_holder"> <!-- NOT IMPORTANT PART, ONLY THE MENU HOLDER AND MENU -->
<p class="close_nav_mobile">
<img src="<?= base_url() ?>public/web/images/close_menu.png">
</p>
<ul id="menu_item_list" class="">
<li role="presentation"><a class="menu_1" href="<?= $base_url ?>nasa-ponuka">NAŠA PONUKA</a></li>
<li role="presentation"><a class="menu_2" href="<?= $base_url ?>referencie">REFERENCIE</a></li>
<li role="presentation"><a class="menu_3" href="<?= $base_url ?>kontakt">KONTAKT</a></li>
<li id="order_link" class="menu_order_link order_form_open" role="presentation"><a href="#"><b>OBJEDNÁVKA</b></a></li>
<li id="registration_link" class="menu_reg_form_link reg_form_open" role="presentation"><a href="#">REGISTRÁCIA</a></li>
</ul>
<a href="#"><img id="fb_icon" src="<?= $base_url ?>public/web/images/fb_icon.png"></a>
</div>
JavaScript＆amp; jQuery（神奇的东西）
<script type="text/javascript">
menuOn = false; //is true when menu is opened
//this makes the array of letters for 'MENU' caption
captionMenu = $( "p.menu" ).text();
var lettersMenu = [];
lengthMenu = captionMenu.length;
for (var i = 0; i <= lengthMenu - 1; i++) {
lettersMenu[i] = captionMenu.charAt(i);
};
//this makes the array of letters for 'CLOSE' (acutally 'ZATVORIŤ') caption
captionClose = $( "p.zatvorit" ).text();
var lettersClose = [];
lengthClose = captionClose.length;
for (var i = 0; i <= lengthClose - 1; i++) {
lettersClose[i] = captionClose.charAt(i);
};
//some variables to be able to check what's going on
length = 0; //length of the caption we're working with
captionMenuOn = false; //true when the 'MENU' caption is visible
captionCloseOn = false; //true when the 'ZATBORIŤ' caption is visible
j = 0; // how many letters have appeared already
k = lengthMenu-1; //example of "how not to name your variables" but It should solve the off-by-one error
//now the 'MENU' caption will appear letter by letter
$(document).on("mouseenter", "#navigation_bar", function(){
if(!menuOn && j==0) { //of course it won't be possible if the menu is opened and there are any letters left
j = 0;
length = lengthMenu; //we're working with 'MENU' now
interval = 150 / length; //counts the interval depending on caption lenght
for (var i = 0; i <= length - 1; i++) { //looping the letters
$('p.caption_holder').delay(interval).queue(function (next) {
$(this).append( '<span class="caption_parcial_' + j + '">' + lettersMenu[j] + '</span>' );
j++; //a letter has appeared
if (j == length-1) { //if all the letters have appeared
captionMenuOn = true; //now you see me
}
next();
});
}
k = lengthMenu - 1; //we should have 4 letters there somewhere
}
});
//now the 'MENU' caption will disappear letter by letter an inverse event to that above
$(document).on("mouseleave", "#navigation_bar", function(){
if(!menuOn && k==lengthMenu-1) { //so the menu needs to be closed and the 'MENU' caption should be visible
length = lengthMenu; //we're working with 'MENU' again
interval = 150 / length;
k = length;
for (var i = 0; i <= length - 1; i++) {
$('.caption_holder').delay(interval / 2).queue(function (next) {
k--; //a letter has disappeared
$('.caption_parcial_' + k).remove();
if (k == 0) { //if we have no letters left
captionMenuOn = false; //now you don't (see me)
}
next();
});
}
j = 0; //we have 0 letters visible now
}
});
//--------------------------------------THIS PART OPENS AND CLOSES THE MENU and resets the 'j' variable in case someone messed up the captions
$(document).on("click", "#navigation_bar, .close_nav_mobile", function(){
if(menuOn)
$(".caption_holder").show();
smallMenu();
});
$(document).on("click", ".menu_order_link", function(){
smallMenu();
j=0;
});
$(document).on("click", ".menu_reg_form_link", function(){
smallMenu();
j=0;
});
//function that opens or closes the menu
function smallMenu() {
if(!menuOn) { //if the menu is closed
$("#menu_icon").attr("src", base_url + "public/web/images/close_menu.png").addClass("menu_close"); //icon changes
//$("nav > ul").show();
//the 'MENU' caption dissapears, we've seen this code before
length = lengthMenu;
interval = 150 / length;
j = length;
for (var i = 0; i <= length - 1; i++) {
$('.caption_holder').delay(interval / 2).queue(function (next) {
j--;
$('.caption_parcial_' + j).remove();
//and the 'CLOSE' caption will appear right away
if (j == 0) {
captionMenuOn = false;
length = lengthClose; //now we're working with 'CLOSE' caption
interval = 150 / length;
j = 0;
for (var i = 0; i <= length - 1; i++) {
$('p.caption_holder').delay(interval).queue(function (next) {
$(this).append( '<span class="caption_parcial_' + j + '">' + lettersClose[j] + '</span>' );
j++;
if (j == length-1) {
captionCloseOn = true;
}
next();
});
}
}
next();
});
}
/*
$("#navigation_holder").animate(
{
'left' : '0%'
}, 1250, 'easeOutExpo' );*/
$("#navigation_holder").css("left", "0%"); //and the menu shows
menuOn = true; //the menu is opened
}
else { //if the menu is opened
$("#menu_icon").attr("src", base_url + "public/web/images/menu.png").removeClass("menu_close"); //changing icon
//we need to hide the 'CLOSE' caption
length = lengthClose;
interval = 150 / length;
j = length;
for (var i = 0; i <= length - 1; i++) {
$('.caption_holder').delay(interval / 2).queue(function (next) {
j--;
$('.caption_parcial_' + j).remove();
if (j == 0) {
captionCloseOn = false;
}
next();
});
}
/*
$("#navigation_holder").animate(
{
'left' : '-50%'
}, 1250, 'easeOutExpo' );*/
//and hide the menu
if($(".mobile_nav").is(":visible")) {
$("#navigation_holder").css("left", "-100%");
} else {
$("#navigation_holder").css("left", "-50%");
}
menuOn = false; //now the menu is closed
}
}
//NOT IMPORTANT
$(window).resize(function() {
if(!menuOn) {
if($(".mobile_nav").is(":visible")) {
$("#navigation_holder").css("left", "-100%");
} else {
$("#navigation_holder").css("left", "-50%");
}
}
});
</script>
CSS（如果你想在你的localhost上正确运行它）：
@import url(https://fonts.googleapis.com/css?family=Biryani:400,700,300,600);
* {
font-family: 'Biryani', sans-serif !important;
margin: 0px;
padding: 0px;
}
body, html {
margin:0;
padding:0;
height:100%;
}
body {
overflow-x:hidden;
}
/*---------------------------NAVIGATION------------------------*/
#navigation_bar {
width: 55px;
height: 100%;
background-color: #000;
display: block;
position: fixed;
margin: 0;
text-align: center;
cursor: pointer;
z-index: 1500;
}
#menu_icon {
margin: auto;
max-width: 22px;
text-align: center;
position: relative;
top: 49%;
}
.zatvorit {
display: none;
font-size: 16px;
color: white;
font-family: "BauerBodoniDOT-Regular", serif !important;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
top: 50%;
left: -11px;
margin-top: -74px;
}
.menu {
display: none;
font-size: 16px;
color: white;
font-family: "BauerBodoniDOT-Regular", serif !important;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
top: 42%;
left: 6px;
margin-top: 5px;
}
.menu_close {
max-width: 18px !important;
}
.caption_holder {
font-size: 16px;
color: white;
font-family: "BauerBodoniDOT-Regular", serif !important;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
top: 50%;
left: 3px;
margin-top: -59px;
width: 50px;
text-align: left;
}
.right_buttons {
position: absolute;
top: 48px;
right: 55px;
}
.caption_holder span {
font-family: "BauerBodoniDOT-Regular", serif !important;
letter-spacing: 3px;
}
#navigation_holder {
width: 50%;
max-width: 50%;
height: 100%;
background-color: #000;
display: block;
position: fixed;
padding: 50px;
margin: 0;
text-align: right;
z-index: 1000;
left: -50%;
transition:all ease 0.5s;
-webkit-transition:all ease 0.5s;
-moz-transition:all ease 0.5s;
-o-transition:all ease 0.5s;
}
感谢您的帮助和建议！ ：）
答案 0 :(得分：1)
使用 SEMAPHOR 模式，如果事件的操作已停止（已完成），则名为locked的变量为false：
var locked_mouseenter=false; //initialize "UNLOCK"
$(document).on("mouseenter", "#navigation_bar", function(){
if( !locked_mouseenter ){
locked_mouseenter = true; //lock
// you code here of event's action
// code stop here, so the next instruction is :
locked_mouseenter = false; //unlock
}
});