Question

这是我的代码;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

和plunk。（可能更容易在这里测试）

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

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

我尝试过其他一些事情，但似乎无法想到这样做的方法。目的是复制$（window）.resize函数当前正在执行的操作，但是只有在窗口调整大小超过这些点后才触发该事件。

希望能够清楚地解释问题。

由于

Answer 1

您可以使用jQuery＆＃39; 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")

  }

});

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

Answer 2

这是我制作的插件，带有resize begin处理程序，resize end处理程序，当然还有on resize处理程序。

(function() {
var resizeEventHandler = function(resizeTarget, _maxResizeWaitTime, onResizeBeginCB, onResizeEndCB, onResizeCB) {
    if(resizeTarget){
        var resizeTimer = null;
        var resizeBegun = false;
        var maxResizeWaitTime = _maxResizeWaitTime || 500;

        resizeTarget.addEventListener('resize', function() {
            if (!resizeBegun) {
                if(onResizeBeginCB){
                    onResizeBeginCB();
                }
                resizeBegun = true;
            }

            if(onResizeCB){
                onResizeCB();
            }

            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(function() {
                if(onResizeEndCB){
                    onResizeEndCB();
                }
                resizeBegun = false;
            }, maxResizeWaitTime);
        });

    }else{
        console.error('No resizeTarget specified!');
    }
};

this.resizeEventHandler = resizeEventHandler;

}).call(this);

这样称呼：

function onResizeBegin() {
    $("body").append('onResizeBegin<br/>')
}

function onResizeEnd() {
    $("body").append('onResizeEnd<br/>')
}

function onResize() {
    $("body").append('onResize<br/>')
}

var resizeEventHandler1 = new resizeEventHandler(window, 500, onResizeBegin, onResizeEnd, onResize);

JSfiddle：https://jsfiddle.net/sv52m1y2/3/

如何只触发一次window.resize？

2 个答案: