jQuery - Ermitteln einer Änderung der Fensterbreite, aber keine Änderung der Höhe

Question

Ich verwende die .resize() Funktion, um Fenstergröße-Ereignisse zu erkennen, aber das erkennt sowohl Höhen- als auch Breitenänderungen.

Gibt es eine Möglichkeit zu erkennen, nur eine Breitenänderung und keine Höhenänderung?

Answer 1

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

Answer 2

können Sie beide Ereignisse erkennen und nur Code ausführen, wenn es sich um eine Breitenänderung ist:

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

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

Und Sie könnten Ereignis überprüfen Entprellung wollen.

Entprellung erzwingt, dass eine Funktion erst wieder aufgerufen wird, nachdem eine bestimmte Zeit verstrichen ist, ohne dass sie aufgerufen wurde. . Wie in „führen Sie diese Funktion nur, wenn 100 Millisekunden vergangen, ohne dass es aufgerufen wird

mehr lesen:

---

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

Answer 3

Man kann auch diese kleine jQuery-Plugin für diesen Einsatz: https://github.com/adjohnson916/jquery-resize-dimension

Hält Ihren eigenen Code besser lesbar:

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

oder gerade:

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

Answer 4

Auch wenn es schon ein paar sind von Antworten mit funktionierenden Lösungen, ist diese Art von Aufgabe leistungskritisch (Fenstergrößenänderungsereignis wird viele Male ausgelöst, während ein Benutzer die Größe des Fensters ändert), also empfehle ich stark, dass Sie sich um das pe kümmern rformance. Bitte haben Sie einen Blick auf den optimierten Code unten:

/* 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 können Sie in den oberen Debounce/Throttle Muster interessiert sein - sie verbessern die Leistung enorm in Fällen wie diesem.