检测窗口宽度变化，但不检测高度变化

问题描述 投票：0回答：6

我使用 

.resize()
函数来检测窗口大小调整事件，但这会检测高度和宽度的变化。

有什么方法可以检测到只是宽度变化而不是高度变化吗？

jquery responsive-design resize jquery-events
6个回答
100
投票
var width = $(window).width();
$(window).on('resize', function() {
  if ($(this).width() !== width) {
    width = $(this).width();
    console.log(width);
  }
});
22
投票

您可以检测这两个事件，并在宽度发生变化时执行代码：

var lastWidth = $(window).width();

$(window).resize(function(){
   if($(window).width()!=lastWidth){
      //execute code here.
      lastWidth = $(window).width();
   }
})

您可能想检查事件去抖动。

去抖强制函数在经过一定时间而没有被调用之前不会被再次调用。如“仅当 100 毫秒过去而未调用该函数时才执行该函数。


了解更多：

5
投票

尽管已经有几个可用解决方案的答案，但此类任务对性能至关重要（当用户调整窗口大小时，会多次触发窗口调整大小事件），因此我强烈建议您注意性能。请看下面优化后的代码：

/* Do not waste time by creating jQuery object from window multiple times.
 * Do it just once and store it in a variable. */
var $window = $(window);
var lastWindowWidth = $window.width();

$window.resize(function () {
    /* Do not calculate the new window width twice.
     * Do it just once and store it in a variable. */
    var windowWidth = $window.width();

    /* Use !== operator instead of !=. */
    if (lastWindowWidth !== windowWidth) {
        // EXECUTE YOUR CODE HERE
        lastWindowWidth = windowWidth;
    }
});

另外，您可能有兴趣检查 Debounce / Throttle 模式 - 在这种情况下它们可以极大地提高性能。

2
投票

也可以使用这个小型 jQuery 插件来实现此目的：https://github.com/adjohnson916/jquery-resize-dimension

使您自己的代码更具可读性：

ResizeDimension.bind('width');
$(window).on('resize-width', function () {
  console.log('resize-width event');
});

或者只是：

$(window).resizeDimension('width', function () {
  console.log('resize-width event');
});
0
投票

@nachtigall 提供的链接已损坏，所以我找到了另一个具有相同库的链接，这帮助我解决了我的问题： resize-dimension.js

解决方案示例如下： 导入库：

<script src="./resize-dimension.js"></script>

创建脚本：

<script type="text/javascript">
        ResizeDimension.bind('width');
        $(window).on('resize-width', function () {
            //alert(window);
            ForResize();
        });
 </script>

当浏览器调整大小时，函数 

ForResize()
会被触发，尽管在这种情况下，IE 比其他浏览器处理得更好，但是，就我而言，它在移动设备上工作得很好，移动设备在滚动页面时触发事件，根据移动浏览器，它可以隐藏地址栏，从而影响浏览器的大小。实施该库有帮助！

我使用了here提供的计数器/计时器，并根据我的需要进行了修改。以下是我必须创建的关键脚本：

<script type="text/javascript">
    function RefreshWidth() {
        var _hcontainer = $("#chart_container").width();
        var _hcontainerInt = parseInt(_hcontainer, 10);
        $("#txChartSize").val(_hcontainerInt);
        $("#txChartSize_1").val(_hcontainerInt);
        $("#textWidthFire").val(_hcontainerInt);
        DetectResizeChange();
    }
</script>

<script type="text/javascript">
    var myTimer; //also in C#
    var c = 0;
    //these functions are needed in order to fire RefreshWidth() so it will fire DetectResizeChange() after browser changes size
    function clock() {
        //RefreshWidth();
        myTimer = setInterval(myClock, 1000);
        c = 3;

        function myClock() {
            document.getElementById("loadMsg").innerHTML = "Processing chart, please wait...";
            --c; //--->>counts in reverse to resize
            if (c == 0) {
                RefreshWidth(); //--->>gives enough time for the width value to be refreshed in the textbox
                clearInterval(myTimer);
            }

        }
    }

    //detects size change on the browser
    function DetectResizeChange() {
        var _NoDataAvailable = $('#txNoDataAvailable').val();

        if (_NoDataAvailable != 'NoData') {

            var refLine = $("#refLine").width();

            var _hcontainer = $("#chart_container").width();
            var _width = _hcontainer;

            var _hcontainerInt = parseInt(_hcontainer, 10);

            $("#txChartSize").val(_hcontainerInt);
            $("#textWidthFire").val(_hcontainerInt);
            $('#msgAdjustView').show();

            $("#msgAdjustView").text("Loading data and adjusting chart view, please wait...");
            $('.modal').show();

            var checkOption = document.getElementById('lbViewingData').value;
            var button;
            var btnWidth;
            btnWidth = document.getElementById('btnStopTimer');
            if (checkOption == 'Option 1') {
                button = document.getElementById('firstTab');
            } else if (checkOption == 'Option 2') {
                button = document.getElementById('secondTab');
            } else if (checkOption == 'Option 3') {
                button = document.getElementById('thirdTab');
            }
            button.click();
        }
    }
</script>
        <script type="text/javascript">
            function ForResize() {
                var _NoDataAvailable = $('#txNoDataAvailable').val();

                if (_NoDataAvailable != 'NoData') {
                    clock();
                    document.getElementById('loadMsg').innerHTML = 'Resizing chart in progress...';
                }
            }

</script>

以防库的链接再次损坏，这里是来自同一来源的代码（resize-dimension.js）：

(function (root, factory) {
  var moduleName = 'ResizeDimension';
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], function ($) {
        return (root[moduleName] = factory($));
    });
  } else {
    root[moduleName] = factory(root.$);
  }
}(this, function ($) {

  var $window = $(window);

  var ResizeDimension = function ($el, dimension, handler, options) {

    if (! (this instanceof ResizeDimension)) {
      return new ResizeDimension($el, dimension, handler, options);
    }

    this.$el = $el;

    this.init(dimension, handler, options);

    return this;
  };

  /**
   * Stub - overridden on #init()
   */
  ResizeDimension.prototype.onResize = function () {};

  ResizeDimension.bound = {};

  ResizeDimension.bind = function (dimension, options) {
    if (ResizeDimension.bound[dimension]) return;
    ResizeDimension.bound[dimension] = true;
    $window.resizeDimension(dimension, function () {
      $window.trigger('resize-' + dimension);
    }, options);
  };

  ResizeDimension.prototype.init = function (dimension, handler, options) {

    if (typeof dimension === 'object') {
      options = dimension;
      dimension = options.dimension;
      handler = options.handler;
    }

    options = $.extend({}, options);
    options.dimension = dimension;
    options.handler = handler;

    this.options = options;

    if ($.isFunction(options.changed)) {
      this.changed = options.changed;
    }

    this.dimension = this.normalize(options.dimension);
    this.handler = options.handler;
    this.previousValue = this.value();

    var proxied = $.proxy(this.handle, this);
    if (options.throttler) {
      this.onResize = options.throttler(proxied);
    }
    else {
      this.onResize = proxied;
    }
  };

  ResizeDimension.prototype.normalize = function (dimension) {
    return dimension;
  };
  ResizeDimension.prototype.changed = function (previous, current) {
    return previous !== current;
  };

  ResizeDimension.prototype.value = function (e) {
    return this.$el[this.dimension]();
  };

  ResizeDimension.prototype.handle = function (e) {
    var currentValue = this.value();
    if (this.changed(this.previousValue, currentValue)) {
      this.previousValue = currentValue;
      return this.handler.call(this.$el, e);
    }
  };

  var $resizeDimension = function () {
    var args = Array.prototype.slice.call(arguments);
    return this.each( function() {
      var $el = $(this);
      args = [$el].concat(args);
      var instance = ResizeDimension.apply(null, args);
      $el.on('resize', $.proxy(instance.onResize, instance));
    });
  };

  $.fn.resizeDimension = $resizeDimension;

  return ResizeDimension;

}));
0
投票

非常感谢@thecodeparadox！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.