jQuery宽度变化检测

Question

现在解决了，谢谢

我看到resize（）的问题有很多近似的答案，这是我的代码：

'greater（）'是我想要在屏幕宽度调用时调用的布局函数，无论设备方向是> = 501，'small（）'是我想在屏幕宽度<501时调用的函数。

我的问题是我不希望在window.height改变时调用这些函数。 请注意，在我的页面中，我在移动视图中使用手风琴，如果我展开手风琴面板，它会增加页面的高度，即使浏览器窗口没有重新调整大小。 jQuery将此视为window.resize。

$(window).resize(function(e) {
    var winWidth = $(window).width();
    if (winWidth >= 501){
       larger();
    }
    if (winWidth < 501){
       smaller();
    }
});

任何答案都赞赏，如果我需要澄清任何事情，请告诉我。

我在jquery-ui-1.10.3.custom.min.js使用jquery-1.11.0.min.js jquery-ui-1.10.3.custom.min.js

谢谢

Answer 1

如何存储对前一个宽度的引用，如果在调整大小时宽度已更改，则调用您的函数 - 否则跳过它。 喜欢如此：

// If you don't want it to change the first time
// then set this value on document load to get initial window width
var prevWinWidth = 0;

$(window).resize(function(e) {
    var winWidth = $(window).width();

    if(winWidth != prevWinWidth) {
        if (winWidth >= 501){
            larger();
        }
        if (winWidth < 501){
            smaller();
        }
        prevWinWidth = winWidth;
    }
});

Answer 2

创建一个全局变量，用于跟踪窗口的最后已知宽度。 仅当宽度发生变化时，请评估宽度以调用相应的函数。

var lastWidth = 0;
$(window).resize(function (e) {
    var winWidth = $(window).width();
    if (lastWidth !== winWidth) {
        winWidth >= 501 ? larger() : smaller();
        lastWidth = winWidth;
    }
});