Wie erkennt man eine Browser-Bildschirmbreite, die über einen bestimmten Punkt hinaus mit jQuery steigt?

Question

Grundsätzlich möchte ich ein Ereignis auslösen, wenn der Benutzer die Größe des Browsers von X auf Y erhöht. Vorausgesetzt, X = Alles, was weniger als 750 Pixel, und Y ist alles mehr als 750 Pixel.

Gerade jetzt, ich tue etwas wie folgt aus:

$(window).resize(function(){ 
    if ($(window).width() >= 750) { 
     console.log('750 or more'); 
    } 
}); 

Dies funktioniert jedoch seine offensichtlich nicht effizient. Wenn ich zum Beispiel mein Fenster von 780px auf die maximale Breite (1024px) skaliere, wird auch dann das Ereignis ausgelöst. Oder selbst wenn ich die Größe von 800px auf 780px reduziere, bekomme ich offensichtlich immer noch die Konsolenausgabe.

Wie bekomme ich das richtig?

Answer 1

Sie müssen setTimeout zulassen, damit die Prüfung stattfinden kann.

Beispiel:

var resizeTimer; 

$(window).resize(function() { 


clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(function() { 
    var body_size = $(window).width(); 

    // ... 
    // do your screen check here 
    // ... 


    }, 1); 

}) 

hoffe, das hilft

Answer 2

Es für dieses Problem keine echte Lösung ist die, da das Entfernen auf Grßenänderungsereignis nach max Breite ergibt die auf Resize-Funktion nicht mehr erreicht wurde sein auch wenn die Breite unter 1024px liegt.

Vielleicht ist es in Zukunft möglich, nur unter bestimmten Bedingungen ein On-Resize-Event zu haben.

Sie können auch das Enresize-Ende-Ereignis verwenden, um die Funktion erst nach der Größenänderung des Fensters auszulösen. Beachten Sie, dass dies zu visuellen Änderungen führen kann, nachdem ein Benutzer die Größe eines Fensters geändert hat und nicht während der Größenänderung eines Fensters.

Es gibt mehrere Methoden, die auf Resize-Ereignis zu machen eine bessere Leistung: http://bencentra.com/code/2015/02/27/optimizing-window-resize.html

Answer 3

Hier ist eine gedrosselte Version Skript, das ein guter Start

Fiddle demo

(function(timeout,bigger) {  // local static var - timeout,bigger 
 

 
     window.addEventListener("resize", function(e) { 
 
     if (!timeout) { 
 
      timeout = setTimeout(function() { 
 
      timeout = null; 
 
      actualResizeHandler(e); 
 

 
      // Set the actual fire rate 
 
      }, 66); 
 
     } 
 
     }, false); 
 

 
     function actualResizeHandler(e) { 
 
     // handle the resize event 
 
     
 
     if (window.innerWidth >= 750 && !bigger) { 
 
      //passed above (or equal) 750 
 
      document.querySelector('span').style.color = 'blue'; 
 
      document.body.innerHTML += '<br>above 750'; 
 
      
 
     } else if (window.innerWidth < 750 && bigger) { 
 
      //passed below 750 
 
      document.querySelector('span').style.color = 'red'; 
 
      document.body.innerHTML += '<br>below 750'; 
 
     } 
 
     bigger = (window.innerWidth >= 750); 
 

 
     } 
 
     
 
     // run once at load 
 
     bigger = (window.innerWidth < 750); 
 
     actualResizeHandler(); 
 
    
 
    }(null,false));

<span>This text is blue on big and red on small</span>

sein könnte

und hier ist eine Verwendung von CSS-Medien Abfrage

span { 
 
    color: red; 
 
} 
 

 

 
@media screen and (min-width: 750px) { 
 
    span { 
 
    color: blue 
 
    } 
 
}

<span>This text is blue on big and red on small</span>