jQuery - 检测窗口宽度变化但不检测高度变化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery - 检测窗口宽度变化但不检测高度变化相关的知识，希望对你有一定的参考价值。
我正在使用.resize()函数来检测窗口重新调整大小事件，但这会检测高度和宽度的变化。
有没有办法检测宽度变化而不是高度变化？
答案
var width = $(window).width();
$(window).on('resize', function() {
if ($(this).width() != width) {
width = $(this).width();
console.log(width);
}
});
另一答案
您可以检测这两个事件，只需在宽度更改时执行代码：
var lastWidth = $(window).width();
$(window).resize(function(){
if($(window).width()!=lastWidth){
//execute code here.
lastWidth = $(window).width();
}
})
你可能想检查事件去抖动。
Debouncing强制执行一个函数不会被调用，直到一定时间过去而没有被调用。正如在“执行此函数时，只有在没有被调用的情况下已经过了100毫秒。
阅读更多：
- https://css-tricks.com/the-difference-between-throttling-and-debouncing/
- https://davidwalsh.name/javascript-debounce-function
另一答案
尽管工作解决方案已有一些答案，但这种任务对性能至关重要（当用户调整窗口大小时，窗口调整大小事件会被触发多次）所以我强烈建议您注意性能。请看下面的优化代码：
/* 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模式 - 它们在这种情况下极大地提高了性能。
另一答案
人们也可以使用这个微小的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');
});
另一答案
@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.norma以上是关于jQuery - 检测窗口宽度变化但不检测高度变化的主要内容，如果未能解决你的问题，请参考以下文章