javascript - 如何只触发 window.resize 一次？

Question

这是我的代码；

$(window).resize(function() {
  if ($(window).width() >= 760) {
    $('.sidebar-left').one().css("display", "block")
  } else if ($(window).width() <= 760) {
    $('.sidebar-left').one().css("display", "none")

  }

});

var m = $(".menu");

m.addClass('fa-bars');

m.on('click', function() {
  if (m.hasClass('fa-bars')) {
    m
      .removeClass('fa-bars')
      .addClass('fa-times');
    $(".sidebar-left").css("display", "block")
  } else {
    m
      .removeClass('fa-times')
      .addClass('fa-bars');
    $(".sidebar-left").css("display", "none")

  }
});

.sidebar-left {
  width: 100px;
  position: fixed;
  background-color: black;
  height: 100%;
}
.menu.fa {
  display: none;
}
@media handheld,
screen and (max-width: 760px) {
  .sidebar-left {
    display: none;
    width: 100%;
    background-color: black;
    height: 100px;
  }
  .menu.fa {
    display: inline-block;
    font-size: 35px;
    color: black;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu fa"></div>
<div class="sidebar-left"></div>

还有一个 plunk . (这里可能更容易测试)

所以这只是一个简单的菜单。我遇到的问题是，目前每次调整页面大小时都会运行调整大小事件，因此如果我的菜单显示在 760 像素以下，如果我打开它，它会在调整大小时自动消失。

如果我完全去掉 javascript 调整大小功能并将其留给 css，问题是如果我在较小的窗口中打开和关闭菜单，当我再次放大窗口时显示将设置为无。

我已经尝试了一些其他的东西，但似乎想不出这样做的方法。目的只是复制 $(window).resize 函数当前正在执行的操作，但只有在窗口调整大小超过这些点时才会触发该事件。

希望问题解释清楚。

谢谢

Answer 1

您可以使用 jQuery 的 one()方法，它只被激活一次:

$(window).one('resize', function() {
  if ($(window).width() >= 760) {
    $('.sidebar-left').one().css("display", "block")
  } else if ($(window).width() <= 760) {
    $('.sidebar-left').one().css("display", "none")

  }

});

这将按照您的要求解决您的问题，但实际上我建议不要禁用调整大小事件，而只是更好地处理它，即检查打开/关闭侧边栏是否合适。