Question

我正在使用addEventListener创建一个滑动菜单，通过该菜单，我会在单击某个项目时显示菜单的隐藏部分。但是，当再次单击该项目时，滑动过程将重新开始。有没有办法阻止侦听器执行当前正在执行的代码？

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

Answer 1

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

例如：

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

Answer 2

只需将其包装在答案中：这是不你的问题的答案，但我没有看到任何理由使用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

有没有办法阻止事件监听器在执行时执行代码？

2 个答案: