有没有什么办法可以防止EventListener在执行时执行代码？

我正在使用addEventListener进行滑动菜单，通过它我可以在单击项目时显示菜单的隐藏部分。但是，当再次点击该项目时，再次滑动的过程重新开始。有什么办法可以防止侦听者执行正在执行的代码吗？有没有什么办法可以防止EventListener在执行时执行代码？

var menuItemHidden = document.getElementById("hidden"); 

    // Unrolling 

    function unroll() { 

     var height = 0; 

     var unroll1 = function() { 

      height = height + 1; 
      menuItem.style.height = height + "px"; 

      if (height == 100) { 

       clearInterval(i); 

      } 

     }; 
     d.unrolling = "rolling"; 
     var i = window.setInterval(unroll1,1); 

    } 


    var menuItem = document.getElementsByTagName("li"); 

    // I would like to prevent this code from being executed when it is currently 
    // running, is there any way to achieve this? 

    menuItem[2].addEventListener("click",unroll,true);

来源

2014-02-15 user3104270

难道你不能用CSS做这个吗？如果您可以发布一些HTML，我可以看看您的情况是否可行，因为使用CSS可以更容易：'#hidden：active〜#menuItem，#menuItem：hover {height：100px;}'用于设置高度，如你想动态做的那样：'#menuItem {transition：height .1s ease;}'做平滑。 – MarijnS95

刚做了一个[** demo **]（http://jsfiddle.net/tb3S8/），表明你可以使用CSS做得更好更干净。 – MarijnS95

是的，我知道这可以用CSS来实现，而且这种方法更简单，更清晰，我只是想用JavaScript来尝试它，无论如何都要付出努力。 :) – user3104270

当然 - 只是设置一个布尔标志，表示函数当前是否正在执行。在您的处理程序中，检查标志，然后在完成后更新它。

例如：

var menuItemHidden = document.getElementById("hidden"); 
var running = false; 
// Unrolling 

function unroll() { 
    if (!running) { 
    .. running = true .. 

    .. execute code.. 

    .. running = false .. 
    } 
}

如果你不想running污染全局命名空间，只需使用一个封闭。

var unroll = (function() { 
    var running = false; 
    return function() { 
    .. unroll code .. 
    }; 
})();

来源

2014-02-15 17:59:39 linstantnoodles

来包装它的答案：这是不是的回答你的问题，但我看不出有任何理由设置高度使用JS，而这可以更动态地完成每毫秒与CSS。这也意味着菜单返回（高度越来越小）。在CSS中点击#hidden，你想选择#hidden:active，然后选择下一个元素#menuItem。你用~这样做，但如果#menuItem是里面的#hidden，你想选择+菜单项。

#hidden:active ~ #menuItem, #hidden:hover ~ #menuItem, #menuItem:hover { 
    height:100px; /*This sets the height when you hover over the hidden div or click on it. To prevent the menu from disappearing when you hover over it #menuItem:hover is added*/ 
} 
#menuItem { 
    height:0; 
    overflow:hidden; 
    transition:height .1s ease; /*This is for the animation, so that the div moves slowly and not in an instant*/ 
}

结论：除非你有一个非常特殊的原因，使用CSS。它更干净，更简单，不需要脚本（一些浏览器和adblock加不执行）。

DEMO

来源

2014-02-15 18:11:26 MarijnS95

有没有什么办法可以防止EventListener在执行时执行代码？

回答

相关问题