DOM onresize Ereignis

Question

Wenn ich diese

window.onresize = function() { 
    alert('resized!!'); 
}; 

Meine Funktion mehrmals ganzen die Resize gefeuert wird, aber ich möchte die Abschluss des Resize erfassen. Dies ist in IE.

Irgendwelche Ideen? Es gibt verschiedene Ideen da draußen, aber hat nicht für mich bisher funktioniert (Beispiel IE ist angeblich window.onresizeend Ereignis.)

Answer 1

In diesem Fall würde ich stark vorschlagen Entprellung. Die einfachste, effektivste und zuverlässigste Methode, dies in JavaScript zu tun, die ich gefunden habe, ist Ben Alman's jQuery plugin, Throttle/Debounce (kann mit oder ohne jQuery verwendet werden - ich weiß ... klingt seltsam).

Mit Entprellung, der Code, dies zu tun wäre so einfach wie:

$(window).resize($.debounce(1000, function() { 
    // Handle your resize only once total, after a one second calm. 
    ... 
})); 

Hoffnung, dass jemand helfen kann. ;)

Answer 2

Sie erhalten mehrere Ereignisse, weil es wirklich mehrere Ereignisse gibt. Windows animiert die Größenänderung, indem Sie es mehrmals ziehen, während Sie das Fenster ziehen (standardmäßig können Sie es in der Registrierung ändern, denke ich).

Sie könnten eine Verzögerung hinzufügen. Führen Sie ein clearTimeout, setTimout (myResize, 1000) jedes Mal durch, wenn das IE-Ereignis ausgelöst wird. Dann wird nur die letzte die tatsächliche Größe ändern.

Answer 3

Dies ist nicht perfekt aber es sollte Ihnen den Start geben Sie brauchen.

var initialX = null; 
var initialY = null; 
var lastResize = null; 
var waiting = false; 
var first = true; 
var id = 0; 

function updateResizeTime() 
{ 
    if (initialX === event.clientX && initialY === event.clientY) 
    { 
     return; 
    } 

    initialX = event.clientX; 
    initialY = event.clientY; 

    if (first) 
    { 
     first = false; 
     return; 
    } 

    lastResize = new Date();    
    if (!waiting && id == 0) 
    { 
     waiting = true; 
     id = setInterval(checkForResizeEnd, 1000); 
    } 
} 

function checkForResizeEnd() 
{ 
    if ((new Date()).getTime() - lastResize.getTime() >= 1000) 
    { 
     waiting = false; 
     clearInterval(id); 
     id = 0; 
     alert('hey!'); 
    } 
} 

window.onresize = function() 
{ 
    updateResizeTime(); 
} 

Answer 4

nutze ich immer wenn ich etwas nach der Größenänderung machen möchte. Die Aufrufe an setTimeout und clearTimeout haben keinen nennenswerten Einfluss auf die Geschwindigkeit der Größenanpassung, es ist also kein Problem, dass diese mehrfach aufgerufen werden.

var timeOut = null; 
var func = function() { /* snip, onresize code here */}; 
window.onresize = function(){ 
    if(timeOut != null) clearTimeout(timeOut); 
    timeOut = setTimeout(func, 100); 
} 

Answer 5

mochte ich Pim Jager elegante Lösung, obwohl ich glaube, dass eine zusätzliche paren am Ende gibt es und ich denke, dass vielleicht die setTimeout sein sollte „timeout = setTimeout (func, 100);“

Hier ist meine Version mit Dojo (einer Funktion definiert genannt demo_resize() unter der Annahme) ...

 
var _semaphorRS = null; 
dojo.connect(window,"resize",function(){ 
if (_semaphorRS != null) clearTimeout(_semaphorRS); 
_semaphorRS = setTimeout(demo_resize, 500); 
}); 

Hinweis: in meiner Version der hinteren paren erforderlich.

Answer 6

Nicht sicher, ob dies helfen könnte, aber da es scheint perfekt zu funktionieren, hier ist es. Ich habe den Ausschnitt aus dem vorherigen Beitrag genommen und leicht modifiziert. Die Funktion doCenter() übersetzt zuerst px in em und subtrahiert dann die Breite des Objekts und teilt den Rest durch 2. Das Ergebnis wird als linker Rand zugewiesen. doCenter() wird ausgeführt, um das Objekt zu zentrieren. Timeout wird ausgelöst, wenn die Größe des Fensters geändert wird und doCenter() erneut ausgeführt wird.

function doCenter() { 
document.getElementById("menuWrapper").style.position = "fixed"; 
var getEM = (window.innerWidth * 0.063); 
document.getElementById("menuWrapper").style.left = (getEM - 40)/2 + "em"; 
} 

doCenter(); 

var timeOut = null; 
var func = function() {doCenter()}; 
window.onresize = function(){ 
    if (timeOut != null) clearTimeout(timeOut); 
    timeOut = setTimeout(func, 100); 
}; 

Answer 7

einfache reine Javascript-Lösung, sondern nur die 1000 int ändern Wert für mehr Ansprechbarkeit

 var resizing = false; 
     window.onresize = function() { 
      if(resizing) return; 
      console.log("resize"); 
      resizing = true; 
      setTimeout(function() {resizing = false;}, 1000); 
     };