jquery - 使用 jQuery 连续获取窗口大小

Question

我是否使用 jQuery 获取窗口大小？

winWidth = $(window).width();
        
$("#status").text(winWidth);

我已经插入了这个，但我只得到了一次。如果我缩小窗口，值是一样的。有某种方式可以让这个“事件”始终成为监听器吗？

Answer 1

在 jQuery 中使用.resize()事件。它会在您更改窗口大小时更新大小。在您的情况下，它是固定的。这是在页面加载时计算的。因此，您需要在调整窗口大小时更新该大小。

var winWidth  = 0;
$(window).resize(function() {
  winWidth = $(window).width();
  $("#status").text(winWidth);
});

Answer 2

使用 jqueryresize()事件。

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

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

Answer 3

如果你挂钩 resize 事件并对每次更改进行大量处理，你将冻结浏览器，因为 resize 事件每秒会在桌面上触发数百个。

您需要对函数进行一些去抖动：

function updateOrientation() {
    // Detect whether device supports orientationchange event, otherwise fall back to the resize event
    // Genius solution from http://stackoverflow.com/a/2307936
    var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize", newAngle;

    if(supportsOrientationChange){
        newAngle = window.orientation;
        switch(newAngle){
            case 0:
            case 180: newOrientation = 'portrait'; break;
            case 90:
            case -90: newOrientation = 'landscape'; break;
        }
    } else {
        if(document.width < document.height){
            newOrientation = 'portrait'
        } else {
            newOrientation = 'landscape'
        }
    }

    // Do some processing here

    /*
     * Beautiful debouncing for resize event firing too much on the PC
    * by Pim Jager http://stackoverflow.com/a/668185/930987
    */
    resizeEvent = false;

    window.addEventListener(orientationEvent, function() {
        if(!resizeEvent) {
            clearTimeout(resizeEvent);
            resizeEvent = setTimeout(updateOrientation, 500)
        }
    })
   }