调整窗口大小时多次调用函数[JQuery]

Question

这是我想要做的：

-当窗口的宽度小于 700px 并且用户点击底部的灰色条时，一个红色的菜单会向上滑动并停留在那里。

-当窗口宽度大于700px时，用户点击灰条时不会发生任何事情。

我已将 resize() 事件绑定到浏览器窗口，因此如果用户在页面加载后调整窗口大小，则会检测到更改。

这是我的密码笔：http://codepen.io/Chiz/pen/xwrpWG （在您阅读以下内容之前，请不要点击！）

以下是产生奇怪问题的方法：

1) 在点击上面的 Codepen 链接之前，将窗口大小调整到 700px 以下，然后点击我上面的 codepen（如果不确定 700px 的宽度，让它变小）

2) 单击底部的灰色条。一个红色矩形应该向上滑动并停止。 再次单击。红色矩形向后滑动。反复点击，红色矩形每次上下滑动。这是正确的行为。

3) 现在，无需重新加载或刷新 codepen 即可调整浏览器宽度。 您可以使其更宽或更窄，只要调整窗口大小即可。 再次单击灰色条。出现错误。红色矩形向下滑动 MULTIPLE 次！

有时，您调整大小的次数越多，滑动的次数就越多！ :-O

我该如何解决这个问题？

//bind click event to the gray bar on page's first load
showMenuIfWidthSmallerThanSevenHundred();

//detect window resizes
$(window).resize(function() {
  showMenuIfWidthSmallerThanSevenHundred();
});


function showMenuIfWidthSmallerThanSevenHundred() {
  if ($(window).innerWidth() <= 700) {
    $("div").on("click", function() {
      /* make menu fill the entire screen that is
      not occupied by the gray bar */
      var nMenuHeight = $(window).height() - $(this).height();

      $(".menu").height(nMenuHeight);

      /* position the menu so that the bottom of the menu
      touches the top of the gray bar */
      $(".menu").css("bottom", $(this).height());

      //make menu slide upwards / downwards
      $(".menu").slideToggle();
    });
  }
}

div {
  width: 100%;
  height: 53px;
  background-color: gray;
  position: absolute;
  bottom: 0;
}
.menu {
  width: 100%;
  height: 100px;
  background-color: #F08080;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

<div class="menu"></div>

Answer 1

您可以进行去抖动以减少触发事件的次数。我推荐 Paul Irish 的 smartresizer，它使用 debouces 来达到这个目的。

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

如教程所说，你可以使用这个简单的监听器：

 $(window).smartresize(function(){
    // code that takes it easy...
 });

您可以对吨触发事件进行去抖动，例如调整大小、滚动等。

Answer 2

好的，在阅读了这里的提示和回复后，我想我已经确定了这个问题：

http://codepen.io/Chiz/pen/rOwPEm

如果窗口宽度小于 700 像素并且点击了灰色条，红色矩形会向上滑动。再次单击时，红色矩形会向下滑动。

如果窗口宽度超过 700 像素，则单击灰色条时不会向上滑动红色矩形。 如果当用户将浏览器宽度调整为超过 700px 时红色 rect 可见，则红色 rect 将向下滑动，因为宽度已经超过 700px。

我喜欢 Underscore.js！干杯！

$(window).resize(_.debounce(function() {
  showMenuIfWidthSmallerThan7Hundred();
}, 500));

function showMenuIfWidthSmallerThan7Hundred() {
  if ($(window).innerWidth() <= 700) {
    $("div").off("click.mynamespace").on("click.mynamespace", function() {
      /* make menu fill the entire screen that is
      not occupied by the gray bar */
      var nMenuHeight = $(window).height() - $(this).height();

      $(".menu").height(nMenuHeight);

      /* position the menu so that the bottom of the menu
      touches the top of the gray bar */
      $(".menu").css("bottom", $(this).height());

      //make menu slide upwards / downwards
      $(".menu").slideToggle();
    });
  }
  //if window is wider than 700px, unbind the click event and slide   the menu back down
  else {
    //check if menu is shown. if yes, make it disappear
    if ($(".menu").css("display") != "none") {
      $(".menu").slideToggle();
    }

    $("div").off("click.mynamespace");
  }
}

div {
  width: 100%;
  height: 53px;
  background-color: gray;
  position: absolute;
  bottom: 0;
}
.menu {
  width: 100%;
  height: 100px;
  background-color: #F08080;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<div></div>

<div class="menu"></div>