jquery show-hide div与$(window).resize的相对偏差，例如+/-10px？

Question

这是我使用的jquery脚本的一部分，用于根据屏幕大小自动显示和隐藏侧边栏，无论是在文档加载时还是在屏幕/浏览器调整大小时(例如横向-纵向模式)。是的，我将它与@media查询结合使用，但这不是这里的问题。需要jQuery来完成汽车部件和切换(此处未显示)。

<script>
    $(document).ready(function() {
        var sidebar = $("#sidebar");
        var advsearch = $("#advsearch");
// auto-hide function
        var resize = function() {
            if( $(window).width() > 650 ) {
                sidebar.show();
                advsearch.hide();
            } else {
                sidebar.hide();
                advsearch.show();
            }
        };
        resize();
        $(window).resize(resize);
    });
</script>

这个问题存在于一些Android2.1设备和他们的普通浏览器上。上面的脚本在屏幕大小稍有变化时自动隐藏侧边栏(函数更新并持续监控用户的屏幕大小)，当我浏览页面并切换到显示侧边栏时，页面上最小的滚动会触发jquery函数，它“认为”屏幕分辨率已经改变，并重新访问刚刚切换/激活的有效隐藏侧边栏！

原因很可能是因为Android 2.1浏览器的垂直滚动条在页面垂直滚动时会以某种方式影响屏幕大小，因此用户永远无法正确到达侧边栏div的内容。这在较新的版本/设备中不会发生，但它很烦人。

解决方案：

基本的想法是去掉后面的部分jquery代码，让脚本变得不那么“智能”(我目前使用的解决方案)。

第二个想法是保留jquery自动隐藏功能，但是在$(window).resize函数中添加一些tollerance。例如，当屏幕从当前大小调整到+/-10px (无论它是什么)时，不会触发调整大小功能。

例如，假设当前屏幕尺寸是400px，那么通过上面的函数隐藏侧边栏的条件是完全填充的(同样，如果之前通过切换按钮显示或隐藏了侧边栏div，例如)，它将不会被隐藏，直到设备/浏览器的窗口/屏幕尺寸不超过389px或超过411px。

我在创建逻辑时遇到了问题，该逻辑将为调整函数设置范围条件。另外，另一个问题是如何暂时固定比较变量(上面示例中的390px和410px )，因为屏幕发生变化时，用于相对比较的变量将重新计算。

对这个解决方案有什么想法吗？谢谢!

Answer 1

我不认为这是一个好的解决方案，但是这个简单的逻辑不能解决你的问题吗？

<script>
  $(document).ready(function() {
    var sidebar = $("#sidebar");
    var advsearch = $("#advsearch");
    var currentSize = 0;
    // auto-hide function
    var resize = function() {
      currentSize = $(window).width();
      if( currentSize > 650 ) {
        sidebar.show();
        advsearch.hide();
      } else {
        sidebar.hide();
        advsearch.show();
      }
    };
    resize();
    $(window).resize(function(){
      if ( (currentSize + 10) < $(window).width()) || (currentSize - 10) > $(window).width())){
        resize();
      }
    });
});
</script>