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

Detect a window width change but not a height change

提问by shrewdbeans

I'm using the .resize()function to detect window re-size events, but this detects both height and width changes.

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

Is there any way to detect just a width changeand not a height change?

有没有办法只检测宽度变化而不检测高度变化？

回答by thecodeparadox

var width = $(window).width();
$(window).on('resize', function() {
  if ($(this).width() !== width) {
    width = $(this).width();
    console.log(width);
  }
});

回答by Taha Paksu

you can detect both events and just execute code when it's a width change:

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

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

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

And you might want to check event debouncing.

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

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called.

去抖动强制一个函数在一段时间内不被调用之前不会被再次调用。如“仅当 100 毫秒过去了而没有被调用时才执行此函数。

Read more:

阅读更多：

---

---

• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://davidwalsh.name/javascript-debounce-function

• https://css-tricks.com/the-difference-between-throttling-and-debouncing/
• https://davidwalsh.name/javascript-debounce-function

回答by Anton

Even though there are already a couple of answers with working solutions, this kind of task is performance critical (window resize event is triggered many times while a user is resizing the window) so I strongly suggest you to take care of the performance. Please, have a look at the optimized code below:

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

/* 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;
    }
});

Plus, you might be interested in checking the Debounce / Throttlepatterns - they improve performance enormously in cases like this.

另外，您可能对检查去抖动/节流模式感兴趣- 在这种情况下，它们可以极大地提高性能。

回答by nachtigall

One can also use this tiny jQuery plugin for this: https://github.com/adjohnson916/jquery-resize-dimension

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

Keeps your own code more readable:

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

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

or just:

要不就：

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

回答by Mr. Munoz

The link provided by @nachtigall is broken, so I found this other with the same library, which helped me to solve my issue: resize-dimension.js

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

Example of solution is as follow: Import library:

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

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

Create script:

创建脚本：

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

The function ForResize()gets fired when the browser is resized, though in this case, IE handles it better than the other browsers, however, in my case, it worked fine for mobile devices, which where firing the events when scrolling the page, which depending on the mobile browser, it can hide the address bar, which affects the browser's size. Implementing that library helped!

该函数ForResize()在浏览器调整大小时被触发，尽管在这种情况下，IE 比其他浏览器处理它更好，但是，在我的情况下，它适用于移动设备，在滚动页面时触发事件，这取决于手机浏览器，它可以隐藏地址栏，这会影响浏览器的大小。实施该库有帮助！

I used the counter/timer provided hereand modified it to my needs. The following are the critical scripts that I had to create:

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

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

In case that the library's link gets broken again, here is the code from the same source (resize-dimension.js):

如果库的链接再次断开，这里是来自同一来源的代码 (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;

}));