jQuery - Detecta un cambio de ancho de ventana pero no un cambio de altura

Question

Estoy usando la función .resize() para detectar eventos de cambio de tamaño de ventana, pero esto detecta cambios de altura y ancho.

¿Hay alguna forma de detectar con un cambio de ancho de y sin un cambio de altura?

Answer 1

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

Answer 2

se puede detectar tanto los acontecimientos y sólo hay que ejecutar código cuando se trata de un cambio de anchura:

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

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

y es posible que desee comprobar evento de eliminación de rebotes.

Debouncing impone que una función no se vuelva a llamar hasta que pase una cierta cantidad de tiempo sin que se llame. . Al igual que en "ejecutar esta función sólo si 100 milisegundos han transcurrido sin que se llama

Leer más:

---

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

Answer 3

También se puede utilizar este pequeño plugin de jQuery para esto: https://github.com/adjohnson916/jquery-resize-dimension

Mantiene su propio código más legible:

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

o simplemente:

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

Answer 4

A pesar de que ya hay un par de respuestas con soluciones de trabajo, este tipo de tarea es crítica para el rendimiento (el evento de cambio de tamaño de la ventana se desencadena muchas veces mientras el usuario cambia el tamaño de la ventana), por lo que le sugiero encarecidamente que cuide del rendimiento Por favor, eche un vistazo al código optimizado a continuación:

/* 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, que podría estar interesado en la comprobación de los patrones Debounce/Throttle - que mejoran el rendimiento enormemente en casos como este.